# Lead generator widget

The lead generator widget will help you collect user requests from your site around the clock. Let's look at how you can install and configure the widget.

## Settings

<div data-with-frame="true"><figure><img src="/files/2Ew4lYrpgzzyepFRDA34" alt="" width="346"><figcaption></figcaption></figure></div>

In the widget settings, in the "Basic Information" section, you need to fill in the following required fields:

1. **Widget name;**
2. **The website domain where you place the widget:** it can be either a website designed on Mavibot, or on the Tilda service, as well as on your own.

Next, there are checkboxes that will help send callbacks to the system after the client sends the request, as well as displaying the logo.

The following settings fields will help you determine which information need to be requested from the client:

<div data-with-frame="true"><figure><img src="/files/6TB3duuIwmB4YpqLeWN6" alt=""><figcaption></figcaption></figure></div>

If necessary, the form for sending to clients will not be sent to your website until the client fills in the required field.

## Trigger conditions

<div data-with-frame="true"><figure><img src="/files/A6Mzqk0xXs1sNewdOU5Y" alt=""><figcaption></figcaption></figure></div>

### Time interval

You can set the widget display time on the website. To do this, use the "When to show widget" feature:

1. **Instantly**\
   This setting will display the widget when the user visits the site.
2. **After time delay**

<div data-with-frame="true"><figure><img src="/files/0e6g3F0SQXNcRp1GaKBH" alt=""><figcaption></figcaption></figure></div>

The widget will be displayed on the website after a certain number of seconds have passed after the client has visited the website.

The time interval is set in seconds, where the minimum value is 1 second and the maximum value is 15 seconds.

3. **After scrolling**

<div data-with-frame="true"><figure><img src="/files/2ctTqjZrAuZrNxcXBM0C" alt=""><figcaption></figcaption></figure></div>

The "After scrolling" condition means that as soon as the user performs an action to scroll through the site, regardless of whether they have scrolled through the entire site to the end or viewed a small part, the widget will be displayed on the site after a set number of seconds.

The minimum value of the time interval is 1 second; the maximum is 15.

## Visual appereance

<div data-with-frame="true"><figure><img src="/files/Z2ohzReMzUzdbxsqA3B0" alt=""><figcaption></figcaption></figure></div>

Use the image upload function in the appearance settings to add a cover.
\
We recommend choosing a bright and interesting design to attract as much user attention as possible.

<div data-with-frame="true"><figure><img src="/files/bA3oKwhcTTQJlwWp1zkB" alt=""><figcaption></figcaption></figure></div>

Next, position the image by aligning it relative to the top, left, and right edges:

<div data-with-frame="true"><figure><img src="/files/VJMyUzv6hIIMMYvEXXJF" alt=""><figcaption></figcaption></figure></div>

Then the empty fields are set: you will need them if you want to specify the title and subtitle of the widget:

<div data-with-frame="true"><figure><img src="/files/WqfNrAw74BS1rFC6WMd7" alt=""><figcaption></figcaption></figure></div>

Then write a motivational text to make the user interested in your offer:

<div><figure><img src="/files/YJH9y922rgXXvrTBaq0J" alt=""><figcaption></figcaption></figure> <figure><img src="/files/KiK2tkkAebikjNJ5qVlD" alt=""><figcaption></figcaption></figure></div>

#### **Graphic customization**

In the appearance settings, you can apply your graphic design skills to create a completely unique widget.

<div data-with-frame="true"><figure><img src="/files/u2ITNvUmzlIK15dPeSDq" alt=""><figcaption></figcaption></figure></div>

You have access to a comprehensive color palette.

We also recommend experimenting with unique patterns for the widget's background to enhance its visual appeal.

## **How to add your widget to a website**

After you have set all the settings and edited the appearance of the widget according to its unique design, click on the "Add widget" button at the bottom of the screen:

<div data-with-frame="true"><figure><img src="/files/R2SvZDk0KR6Tvy799niR" alt=""><figcaption></figcaption></figure></div>

After that, you will go to the list of ready-made widgets, where you need to click on the "Embed code on the site" button:

<div data-with-frame="true"><figure><img src="/files/wALw3Li9spbI7BG2EyeU" alt=""><figcaption></figcaption></figure></div>

After that, you will see a modal window with a script:

<div data-with-frame="true"><figure><img src="/files/6BZwxzZJPwlxRj0x4lHM" alt=""><figcaption></figcaption></figure></div>

Next, copy the script and go to the settings of the website (the domain specified in your widget configuration). Insert the script into the HTML `<head>` section.

{% hint style="info" %}
**To embed the widget on a Tilda website:**

1. Copy the widget script by clicking the **"Embed code on the website"** button.
2. In your Tilda editor, paste the script into the project settings or into an HTML block on the relevant page.
   {% endhint %}

**Perfect!** Your widget setup and installation are now complete.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/websites/widgets/leads.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.