# Page settings

Click the top panel’s **"Settings"** button to access the page’s general settings.

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

This opens a menu with the following sections: **General**, **Messengers**, **Analytics**, **Colors**, **Fonts**, and **HTML**.

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

## **General**

### **Page Information**

<div data-with-frame="true"><figure><img src="/files/9v0toWNEOs2zenEalx4S" alt="" width="563"><figcaption></figcaption></figure></div>

#### Name in the List

You can enter any text here. This name is only visible to you in the page list.

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

#### URL

This field allows you to set a custom link (URL) for the page. If left blank, a unique name will be automatically generated from letters and numbers.

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

{% hint style="warning" %}
Requirements:

Only the following characters can be used:

* Latin letters (a–z)
* Digits (0–9)
* Underscore (\_) symbol

The name must be **unique** within the platform. If it is already taken by another user, you won’t be able to use it again.
{% endhint %}

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

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

{% hint style="success" %}
You can connect your own domain to the website.
&#x20;If you're unable to change the name in the link, it means the name is already taken.
&#x20;You can add additional characters or choose a different one.
{% endhint %}

#### **Browser tab name**

By default, the **browser tab name** matches the **site name** field, but you can customize it to be more concise or descriptive.

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

The browser tab name is displayed in the page's address bar.

### **Tag**

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

A tag is a label sent to your bot the moment a user clicks the messenger icon. It allows you to launch specific bot flows instantly, without waiting for the user's first message.

Enter the tag name in the **"Trigger"** field of a trigger block.

{% hint style="warning" %}
The tag is assigned in the page settings.
{% endhint %}

{% hint style="success" %}
The value specified in the **Tag** field will be saved to the client's **tag** variable. This variable can later be used for analytics purposes.
{% endhint %}

A message containing this tag will trigger a specific action in your bot's funnel, such as sending a reply or moving to the next step.

Enter a tag, for example: `welcome_offer`

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

The saved tag will be visible in the page info panel.

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

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

**How to use a messenger tag**

First, assign a tag like `main_flow` in your site settings. Then, enter that exact tag in your chatbot's trigger block.

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

**Setting a chat entry point**

Set a specific block (e.g., the start of your main funnel) as the entry point for your bot logic. When a user clicks the messenger icon on your site, they will enter the messenger and immediately begin at this predefined point.

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

{% hint style="info" %}
To configure form blocks and messenger redirect buttons, refer to the **"Form responses"** guide in **Content settings**.
{% endhint %}

When a user clicks the button, they are prompted to go directly to the messenger.

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

* The user transitions from the website to messemger.
* The user taps the **“Start”** or **“Launch”** button (depending on the device). Even if the user has previously interacted with the bot, they must press this button to initiate the bot from the website — this is a requirement set by the messenger platform for bots.
* Instead of **/start**, the bot will receive the **tag specified in the website settings**.
* The client receives the first message from the funnel that is triggered by the specified tag.
* The client's profile contains the following variable:

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

To view analytics for a tag, go to the **"Analytics"** section and open the **"Clients"** tab.

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

Next, create a new widget where you specify the main settings:

* **Analytics period**: for example, “Past month,” “All time,” etc.;
* **Widget name**: any convenient name;
* **Specify a tag** to track.

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

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

Then, add a widget.

{% hint style="success" %}
Done! You can now track how often your bot is launched from your site using a tag.
{% endhint %}

{% hint style="info" %}
MaviBot's built-in analytics lets you track chats, operator efficiency, course progress, and client metrics at no cost, eliminating the need for external tools.

Learn more in the **"MaviBot analytics"** article.
{% endhint %}

### Image settings

Preview image

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

This is the thumbnail or cover image used when your site is shared (e.g., in social media or messaging apps). By default, it uses the first image from your page. To set a custom preview, upload your chosen image in this field.

### **Site protection settings / reCAPTCHA**

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

To set up **reCAPTCHA**, you need to provide a pair of keys (public and secret keys) in the **general settings** of your website, and enable reCAPTCHA verification in your **form settings**.

You can choose any CAPTCHA service to protect your website. In this section, we’ll look at how to install **Google reCAPTCHA**.

1. **Key obtain**

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

To get started, you need to fill in the basic information to obtain the keys: select the CAPTCHA types and add the domain of the website where the protection is intended to be installed. Then, click **"Submit."**

2. **Key input**

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

Next, you will see a pair of keys that need to be copied and pasted into the page settings on your website in MaviBot.

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

3. **Enabling CAPTCHA in the "Form" section**

{% hint style="info" %}
How to create and work with the "Form" section is explained in the article here.
{% endhint %}

Once the **Form** section is set up, open its settings.

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

Click **"Settings"** to open the side menu.

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

A CAPTCHA enable checkbox will be visible there.

### **Authentication**

This option helps filter out users who try to access the site without authorization. However, it’s better to enable it after everything else is set up and you’re sure the configuration is correct. Once it’s enabled, the only way to access the site will be through the authorization button sent by the bot.

Let’s start by linking the domain to the Telegram bot connected to your project.

**Step 1:** Go to **BotFather**, where you created your Telegram bot.

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

**Step 2:** Select a Telegram bot you want to connect to the website and click on it.

<figure><img src="/files/BJb9j5eFPzp9ZMwQkGRv" alt="" width="375"><figcaption></figcaption></figure>

**Step 3:** Go to the settings of the Telegram bot.

<figure><img src="/files/jaP3Nk8Hf8IrgNDNxAp8" alt="" width="345"><figcaption></figcaption></figure>

**Step 4:** In the bot settings, navigate to **Domain**.

<figure><img src="/files/WnamDFF0UuTyMGGOiPyO" alt="" width="294"><figcaption></figcaption></figure>

**Step 5:** Click on **"Set domain"**.

<figure><img src="/files/KLcteuZl73iEoylNx4uR" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="info" %}
If you’ve already linked a domain to the bot, or if you need to set a new domain for the same bot, the "Set domain" button will be replaced with "Reset domain".
{% endhint %}

**Step 6:** Send a domain you want to link to the Telegram bot: to do this, type the domain into the message input field and send it to the bot.

<figure><img src="/files/MPlqgWL7QHejaWyIxA13" alt="" width="563"><figcaption></figcaption></figure>

This can be either your personal domain, which you received from a domain name registrar, or something like mavitbot.ai

At this stage, the domain binding is complete.

After linking the domain to the bot, activate the checkbox **"Require authorization via Telegram"** in the form settings:

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

### Interface and access settings

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

**Access by lists only**

This option allows you to provide access to the site based on the user's presence in certain lists of your project.

**How to hide "Made with MaviBot" label**

&#x20;To hide the label, simply tick this checkbox if required.&#x20;

{% hint style="success" %}
You can remove the "Made with MaviBot" label on any paid plan. We appreciate everyone who keeps the "Made with MaviBot" label on their pages.
{% endhint %}

## HTML/CSS/JS

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

**You can fill out this section if needed.**\
If you're familiar with CSS, you can make your website even more visually appealing. You can also insert analytics code here, a Facebook Pixel, and more.

{% hint style="warning" %}
**PLEASE NOTE!**\
When copying script examples, make sure that if a tag is opened, it must also be closed.\
For example: `<script> ... </script>`, `<style> ... </style>`
{% endhint %}

**How to change the Privacy Policy link**

In the application form block with messenger buttons, you can display a **Privacy Policy checkbox**.\
By default, it links to the constructor's privacy policy.<br>

You can change the link to your own Privacy Policy page using a script.

{% hint style="info" %}
Add the script to the "HTML code (body)" field in the CSS and JS section.
{% endhint %}

```
<script>
document.getElementsByClassName('salebot-privacy__link')[0].href = "privacy policy link";
</script>
```

#### How to disable page indexing

To disable page indexing, add the script to the HTML code (head) field.

```
<meta name="robots" content="noindex, nofollow">
```

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

How to remove the Facebook button your site page

{% hint style="info" %}
Add the script to the "HTML code (body)" field in the CSS and JS section.
{% endhint %}

```javascript
<script>
document.getElementsByClassName('vk_link')[0].remove()
</script>
```

How to remove your site page title

{% hint style="info" %}
**Add the script to the "HTML code (body)" field in the CSS and JS section.**\
This applies to older versions of mini landing pages.
{% endhint %}

```javascript
<script>
document.getElementsByClassName('title_container')[0].remove()
</script>

```

How to edit the Telegram button link.

{% hint style="info" %}
Add the script to the "HTML code (body)" field in the CSS and JS section.
{% endhint %}

```javascript
<script>
window.onload = function() {
    let button = document.querySelector('.tg_link')
    if (button) {
        button.setAttribute('data-url', 'the required value')
        button.removeAttribute('onclick')
        let newUrl = button.getAttribute('data-url')
        button.addEventListener('click', () => {
            window.location.href = newUrl
        })
    }
}
</script>
```

For other messengers, replace `tg_link` with `insta_link`, `fb_link`, etc.

**How to update a button text**

{% hint style="info" %}
**Paste this code into the "HTML code (body)" field in the CSS and JS section.**
{% endhint %}

1. To display the messenger button, create an application form block with questions and specify which messengers the buttons should appear for

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

Set the **button display** style to **"Icon with text"**

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

{% hint style="info" %}
More details about the Form section are explained here. ссылка
{% endhint %}

2. In the Site Settings section, under the CSS and JS tab, paste the following code into the "HTML settings" → "HTML code (body)" field:

<pre class="language-javascript"><code class="lang-javascript">&#x3C;style>
.tg_link {
font-size: 0 !important;
padding: 15px 15px !important;
}
.viber_link {
font-size: 0 !important;
padding: 15px 15px !important;
}

<strong>.tg_link:after {content: "Sign up in Telegram";font-size: 15px;color: white}
</strong>.viber_link:after {content: "Sign up in Viber";font-size: 15px;color: white}
&#x3C;/style>
</code></pre>

This code will change the button text for Telegram and Viber. For other messengers, add similar code following the example.

**How to align buttons in a row**

Paste the following script into the "JS code" field in the main settings of your mini landing page.

```
$(function() {
$('.link_group').css("flexWrap", 'noWrap')
})
```

<div data-with-frame="true"><figure><img src="/files/7UUV0ZiynFIEBLnjpVQI" alt="" width="563"><figcaption></figcaption></figure></div>

**How to change a favicon**

{% hint style="info" %}
Add the script to the "HTML code (head)" field in the CSS and JS section.
{% endhint %}

This code can be used to change the favicon — the icon of a website or web page.

<pre class="language-html"><code class="lang-html"><strong>&#x3C;link rel="shortcut icon" type="image/x-icon" href="icon link" />
</strong></code></pre>

#### How to pass all URL variables/parameters when opening your website

{% hint style="warning" %}
You need to place the script on all pages of YOUR website that contain a proxy link. The script must be added right after the `<body>` tag.

If you're using your own domain for proxy links, you should replace `sbsite.pro` with your domain.
{% endhint %}

If your website contains proxy links to messengers from the site page, you can add this script — it will pass all the variables used to open the site to the bot.

```javascript
<script>
var links = document.getElementsByTagName("a")
for (let i of links) {
    if (i.href.startsWith("https://mavibot.site/")) {
        if (i.href.split("?").length > 1) {
            i.href += "&" + location.search.split("?")[1]
        } else {
            i.href += location.search
        }
    }
}</script>
```

**How to forward analytics cookies to the bot**

{% hint style="warning" %}
The script must be placed on all pages of YOUR website that contain a proxy link. It should be added right after the `<body>` tag.

If you use your own domain for proxy links, you need to replace `mavibot.ai` with your domain.
{% endhint %}

If you need to pass analytics cookies to the bot, add the following script to your site:

```javascript
<script>
setTimeout(function() {
    var links = document.getElementsByTagName("a");
    var cookies = ['_fbc', '_fbp', '_ga', '_ym_uid', 'roistat_visit'];
    var cookies_string = '';

    cookies.forEach(function(cookie_name){
        let cookie_val = get_cookie(cookie_name);
        if (cookie_val !== undefined) {
            cookies_string += (cookies_string != '' ? "&" : '') + cookie_name + "='" + cookie_val + "'";
        }
    });

    for (let i of links) {
        if (i.href.startsWith("https://salebot.site/")) {
            if (i.href.split("?").length > 1) {
                i.href += "&" + cookies_string;
            } else {
                i.href += "?" + cookies_string;
            }
        }
    }

    function get_cookie(name) {
        let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }
}, 3000);
</script>
```

**How to change the privacy policy link**

{% hint style="warning" %}
On the CSS and JS tab, paste the following code into the "HTML Settings" → "HTML code (body)" field:
{% endhint %}

This script allows you to replace the Privacy Policy link with your own.

```
<script>
document.getElementsByClassName('salebot-privacy__link')[0].href = "policy link";
</script>
```

## Messengers

**Initial WhatsApp message**

The text you enter here will automatically appear as a draft in their WhatsApp when they click the link from your site.

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

They can simply press **"Send"** in the messenger.

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

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

1. Create a **"Start"** block in the builder.
2. Enter the text from your initial message into it.

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

## Analitycs

Enable the **"Save analytics data for conversion"** setting to preserve your site conversion tracking.

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

This will allow you to monitor conversions in the **Analytics** tab.

<figure><img src="/files/XyckdTv0imgIlf5XschL" alt=""><figcaption></figcaption></figure>

## Website Export / Page Import

The website builder allows you to export and import entire pages. This is useful for transferring a site between projects without rebuilding it, with all content preserved.

**How to export/import a page:**

1. First, ensure all your changes are saved by clicking the **"Save"** button.

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

Click **"Export page"** in the editor to export your page.

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

Once the file is downloaded (you'll see it in your downloads folder and receive a confirmation), go to the site settings in your target project. There, click **"Create"** to make an identical page.

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

Select the exported page file you saved earlier. Once the upload is confirmed with a notification, you'll be taken directly to the editor to start working on the imported page.

{% hint style="success" %}
If necessary, make the required adjustments and click **the "Save" button**.
{% endhint %}

## **Where to find the page ID?**

The site page ID from the site list can be passed to bot functions — for example, to send a link to your site via the bot or to open it as a mini app in Telegram.

{% hint style="info" %}
Read more about Telegram WebApp in this article.
{% endhint %}

{% hint style="info" %}
The site number is assigned automatically withh the `#` symbol.
{% endhint %}

You can find the page ID by hovering over the desired site page.

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


---

# 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/sites/page-settings.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.