### YouLead Authentication and Connection Setup

Source: https://manual.youlead.io/knowledge-base/integracja-za-pomoca-make-com

Steps to generate API credentials in YouLead and establish a connection within Make.com.

```APIDOC
## YouLead Authentication and Connection Setup

### Description
This section details how to obtain API credentials from YouLead and configure a connection in Make.com to enable automation.

### Steps

1.  **Generate API Credentials in YouLead**:
    *   Log in to your YouLead account.
    *   Navigate to Settings > Applications.
    *   Click "Add new application", name it (e.g., "Make"), and save.
    *   You will receive an `AppId` and `AppSecretKey`.

2.  **Create a Connection in Make.com**:
    *   Open or create a scenario in Make.com.
    *   Select YouLead from the app list and choose a method.
    *   Click "Create a connection".
    *   Enter the following details:
        *   **Connection name**: A name for your connection in Make.
        *   **clientId**: Found in your YouLead client panel URL (e.g., `yourname.youlead.pl`, where `yourname` is the clientId).
        *   **appId**: The `AppId` generated in YouLead.
        *   **secretKey**: The `AppSecretKey` generated in YouLead.

Once saved, YouLead can be used within your Make.com scenarios.
```

--------------------------------

### HTML Popup Structure with CSS and Form

Source: https://manual.youlead.io/knowledge-base/popup-stworzony-w-html

This example demonstrates a complete HTML structure for a YouLead popup, including embedded CSS for styling and an HTML form. Ensure images are hosted on the same server or provided in a zip file for CDN deployment.

```html
<!-- blok styli css -->
<style>
#popup-container{
  font-family: 'Arial' !important;
}
#popup-container input{
  border:1px solid #ADADAD;
}
...
</style>
<!-- koniec blok styli css -->
<!-- blok znaczników html -->
<div id="popup-container" style="width:600px;height:400px;padding:20px;background:#fff; color:#000;">
<img alt="baner1" src="baner1.jpg" style="float:left;" />
<img alt="border" src="border.png" style="float:left;margin:10px 40px 0px 40px;" />
<form id="popup-form" style="margin-top:15px;">
  <label style="font-size:12px;color:#000;display:block;margin:0px;">Imię</label>
  <input type=\"text\" value=\"" class=\"yl-imie" />
  <label style="font-size:12px;color:#000;display:block;margin:0px;">E-mail</label>
  <input type=\"text\" value=\"" class=\"yl-email" />
  <button type="button">Wyślij zapytanie</button>
</form>
</div>
<!-- koniec blok znaczników html -->
```

--------------------------------

### Example with Custom Parameters in Webhook URL

Source: https://manual.youlead.io/knowledge-base/integracja-z-google-lead-forms

This example demonstrates how to include custom data parameters directly in the webhook URL. These parameters will be added as fields to the contact record in YouLead.

```URL
https://a-**clientId**.youlead.pl/api/Command/Contact/ReceiveGoogleForm?data={"investment":"testowa inwestycja","ownerId":54}
```

--------------------------------

### Filter and Select Products Based on Criteria

Source: https://manual.youlead.io/knowledge-base/elementy-dynamiczne-katalog-przykladowych-widokow

Filters a list of products to include only active ones with a photo URL, matching specific room counts (D5 = '2' or '3'). It then groups by name/alias to get unique products and further filters by area (D3 between 45m² and 70m²). Finally, it randomly selects up to 3 products.

```csharp
@{
    var baseList = new System.Collections.Generic.List<Products>();
    if (Model.Products != null)
    {
        var pool = Model.Products
            .Where(p => p != null
                        && p.Active == true
                        && !string.IsNullOrEmpty(p.PhotoUrl)
                        && (p.D5 == "2" || p.D5 == "3"))
            .ToList();

        baseList = pool
            .GroupBy(p => p.Alias ?? p.Name)
            .Select(g => g.FirstOrDefault())
            .Where(x => x != null)
            .ToList();
    }

    var pick = baseList
        .Where(p =>
        {
            var m2 = ParseDec(p.D3);
            return m2.HasValue && m2.Value >= 45m && m2.Value <= 70m;
        })
        .OrderBy(_ => System.Guid.NewGuid())
        .Take(3)
        .ToList();
}
```

--------------------------------

### Example Webhook URL for Google Lead Forms

Source: https://manual.youlead.io/knowledge-base/integracja-z-google-lead-forms

This is an example of the Webhook URL format required for Google Lead Forms to send data to YouLead. Replace 'clientId' with your actual client ID.

```URL
https://a-**clientId**.youlead.pl/api/Command/Contact/ReceiveGoogleForm
```

--------------------------------

### User Login to Store

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-ecommerce

After successful user login, call the /Command/Contact/Switch method. It's important to log the returnCode parameter.

```HTTP
/Command/Contact/Switch
```

--------------------------------

### HTML for Subscription Link

Source: https://manual.youlead.io/knowledge-base/specyfikacja-techniczna-mailingu

Implement this HTML structure for subscription or activation links. The '%%Activation%%' placeholder is dynamically replaced by the system with the relevant subscription URL.

```html
<a href="%%Activation%%">Zapis do subskrypcji</a>
```

--------------------------------

### Tracking Forms with JavaScript API

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-www

Call the Monitor.TrackForm function after form validation to send form data to YouLead. This function is available on pages with the YouLead monitoring code installed. Ensure this call happens before any page reload if the form submission causes one.

```javascript
Monitor.TrackForm('contactForm', postForm);
```

--------------------------------

### Instalacja kodu monitorującego YouLead

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-ecommerce

Fragment kodu JavaScript do umieszczenia na każdej podstronie serwisu, przed zamykającym tagiem </body>. Zawiera identyfikator klienta.

```javascript
<script type="text/javascript" src="https://static.youlead.io/js/youlead.js"></script>
<script type="text/javascript">
    window.youlead = new YouLead('YOUR_CLIENT_ID');
</script>
```

--------------------------------

### Mapping Form Fields with CSS Classes

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-www

Add CSS classes starting with 'yl-' to form input fields to map them to YouLead attributes. The string after 'yl-' becomes the identifier for the field in YouLead. Predefined classes exist for common fields like email, name, and phone.

```html
<input type="text" id="hobby" class="yl-hobby userdefinedclass1 userdefinedclass2" value="describe your hobby" />
```

--------------------------------

### Konfiguracja pliku sw.js

Source: https://manual.youlead.io/knowledge-base/powiadomienia-web-push-specyfikacja-techniczna

Zmodyfikuj plik sw.js, zastępując **clientId** odpowiednią wartością z adresu URL Twojego panelu YouLead.

```javascript
importScripts('https://m-**clientId**.youlead.pl/yl-sw.js');
```

```javascript
importScripts('https://m-**pd**.youlead.pl/yl-sw.js');
```

--------------------------------

### Instalacja kodu śledzącego YouLead

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-www

Umieść ten kod JavaScript bezpośrednio przed zamykającym tagiem </body> strony WWW. Pamiętaj, aby zastąpić _<clientId>_ swoim unikalnym identyfikatorem klienta.

```javascript
<script type="text/javascript">
var youleadId = 'clientId';
var youleadDC = true; 

(function() {
	var yl = document.createElement('script');
	yl.type = 'text/javascript';
	yl.async = true;
	yl.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'm-' + youleadId + '.youlead.pl/m.js?ts=' + (new Date()).getTime();
	document.getElementsByTagName('body')[0].appendChild(yl);
})();
</script>
```

--------------------------------

### Edytuj manifest.json

Source: https://manual.youlead.io/knowledge-base/powiadomienia-web-push-specyfikacja-techniczna

Jeśli plik manifest.json już istnieje, dodaj lub zmodyfikuj pole "gcm_sender_id" z podaną wartością.

```json
"gcm_sender_id": "103953800507"
```

--------------------------------

### Dodaj manifest.json do HTML

Source: https://manual.youlead.io/knowledge-base/powiadomienia-web-push-specyfikacja-techniczna

Dodaj ten link do sekcji <head> swojego kodu HTML, aby wskazać lokalizację pliku manifest.json.

```html
<link rel="manifest" href="lokalizacja">
```

--------------------------------

### Newsletter Signup with Double Opt-in

Source: https://manual.youlead.io/knowledge-base/instrukcja-wdrozenia-youlead-w-serwisie-ecommerce

Use the /Command/Contact/FillForm method with Status = 2 for initial signup. A confirmation email is sent, and the status changes to Active upon clicking the activation link.

```HTTP
POST /Command/Contact/FillForm
{
  "Status": 2
}
```

--------------------------------

### Instalacja kodu śledzącego YouLead

Source: https://manual.youlead.io/article-categories/baza-wiedzy

Podstawowy kod śledzący do umieszczenia na stronie WWW w celu integracji z systemem YouLead.

```javascript
<!-- Kod śledzący -->
<script>
  // Tutaj wklej kod śledzący YouLead
</script>
<!-- Koniec kodu śledzącego -->
```