# Iframe and page messenger

*You can add an AI agent to your website or widget using the page messenger communication channel.*

## Iframe | Page messenger

The «Iframe» communication channel allows your AI agent to interact with users directly on your website, as shown in the screenshot below.

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FY7tu4AVfWmsVuEGwkeMU%2Fpage_0.avif?alt=media&#x26;token=819f7703-02f3-4dca-bc3e-ffc9335123e3" alt=""><figcaption></figcaption></figure>

The «Page messenger» communication channel can be used to create a convenient widget that will be available on your website via a URL link ([example](https://selarti.com/frame?channel=1721200588620)).

### **Step 1. Creating a channel**

To create a channel, go to the «[*Channels*](https://selarti.com/panel?menu=channels)*»* section and click «*Add channel*» in the upper right corner of the screen.

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2F8N44hqeDU6w6eozkG1Zn%2Fpage_1.png?alt=media&#x26;token=5f07cb27-a219-46aa-a437-a018070e5815" alt=""><figcaption></figcaption></figure>

A creation form will open. You need to fill in the following fields:

* **Select channel type** — in the dropdown you can select «Iframe» or «Page messenger».

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FgjkeUz0f4UehbrgudjpL%2Fpage_2.png?alt=media&#x26;token=7644b429-951d-4ecf-8b06-7285718cee7f" alt="" width="528"><figcaption></figcaption></figure>

* **Channel name** (Channel name) — enter a name for your channel.
* **Placeholder** (Placeholder) — enter the text that will be displayed in the input field name. You can leave the field empty.
* **Initial content** (Initial phrase/greeting) — enter the text that will be displayed in the field at the start of the dialog. You can leave the field empty.
* **Img** (Image) — upload an image that will be the avatar of your AI agent.

Click «*Add channel*»*.*

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2Fwu6UG67ogFQmsVNgRUg0%2Fpage_3.png?alt=media&#x26;token=afbb1f95-7c57-4995-b768-1db5b02821d9" alt="" width="524"><figcaption></figcaption></figure>

Next, click on the created channel, copy the iframe code, and paste it into your website's page code.

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FufrkpEtRpVzxjvkFf6yN%2Fpage_4.png?alt=media&#x26;token=78033184-c264-4673-92ec-3962bd14738b" alt="" width="464"><figcaption></figcaption></figure>

For the «Page messenger» channel, simply copy the URL.

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FQRGnOly1BmT3mhCMkhpE%2Fpage_5.png?alt=media&#x26;token=e88d10dc-a2c0-4f37-a718-8f8da177452d" alt="" width="464"><figcaption></figcaption></figure>

### **Step 2. Creating a task**

To activate the AI agent, you need to create a task.

On the left, go to the section «[*Tasks*](https://selarti.com/panel?menu=tasks)» section and click «*Create task*»*.*

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FANsi13CMSlHvEePpKbQ0%2Fpage_6.png?alt=media&#x26;token=c8f159f8-5dfb-42bb-94ad-66ae21520495" alt=""><figcaption></figcaption></figure>

A form for configuring the task will open. You need to fill in the fields:

* **Name** — specify the task name.
* **Type** — select the task type «*Web*».
* **Dialog spending limit ($)** — set a spending limit per dialog in dollars.
* **Service operation format** — select the type «*Incoming communication*»*.*
* **Add channels** — in the dropdown menu, select the Iframe channel or Page messenger channel you created.
* **Select AI** — select the AI that will be used to perform the task. More about creating AI in this [article](https://manual.selarti.com/manual-en/main-sections-of-the-service/ai).
* **Select integration** — specify the integration through which information about successful chats will be transmitted. More about setting up integrations in [article](https://manual.selarti.com/manual-en/main-sections-of-the-service/integration).

{% hint style="warning" %}
If you plan for the AI agent to initiate the dialog, select an AI with the communication type «*Incoming and outgoing communication*».

To respond only to incoming messages, select an AI with the communication type «*Incoming communication*».
{% endhint %}

After filling in all the form fields, click «*Create task*»*.*

<figure><img src="https://271796707-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsBua8zDbkZPvmgjidnwA%2Fuploads%2FxseImeNv8V5V0BqB4j8r%2Fchannel_19_03_1_en.png?alt=media&#x26;token=4a1e8c92-ca57-4895-bd54-1d31bd2da83b" alt="" width="461"><figcaption></figcaption></figure>
