> For the complete documentation index, see [llms.txt](https://learn.islash.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learn.islash.io/features/omnichannel-messaging/web-plugin-integration.md).

# Web-Plugin Integration

Your website is often the first point of contact for customers. By integrating your website with iSlash AI, you can provide real-time support, collect leads, and automate interactions through chat widgets. Follow these steps to connect your website to iSlash AI and enhance your customer experience.

***

## Web Plugin Integration

Follow this [step-by-step guide ](#step-by-step-guide)to integrate the plugin seamlessly.

## Step-by-Step Guide

### Log into your iSlash AI Account.

1. Navigate to **Settings > Channel**.
2. Click on the **+** icon to add a new channel.
3. Provide a **Channel Name** and set the **Timezone**.
4. Under the **Platform** dropdown, select **Web**.
5. Click **Save** to create the channel.

<figure><img src="/files/bv3fjZsigtWsRbMo8436" alt=""><figcaption><p>iSlash AI Account Channel</p></figcaption></figure>

### Configure the Web Plugin

1. On the left panel, find and click **Web Plugins**.

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

2. Click **Create** to set up a new plugin ([Appearance](#appearance-settings) & [Channels](#channels-setting)).

#### Appearance Settings:

* **Name**: Enter a unique name for your web plugin, such as your website’s name.
* **Popup Title**: This is the header text that appears when users click the chat icon. \
  \&#xNAN;*Example: "Chat with Us!"*
* **Popup Body**: Write a brief introductory message for the chat. \
  \&#xNAN;*Example: "How can we assist you today?"*
* **Welcome Message (Optional)**: A message displayed above the chat icon to encourage users to click and chat. \
  \&#xNAN;*Example: "Need help? Click to chat!"*
* Choose the position for the chat icon on your website: **Right** or **Left**.
* Theme Color: Select your preferred theme color using a HEX color code.
* Margins: Set **Margin Right** and **Margin Bottom** values to "20" (in pixels) for standard placement.
* **Language:** Select the language for your web plugin from the following options: *English (ENG)*, *Chinese Traditional (繁體)*, *Chinese Simplified (简体)*.

<figure><img src="/files/nCH9Xbpih3SuLBsJYTc8" alt=""><figcaption><p>Appearance Setting</p></figcaption></figure>

#### Channels Setting

1. Under the **Channels** section, select the web channel you created in [Step 1](#log-into-your-islash-ai-account).
2. A **Web Channel Settings** dialog will appear. Configure the following:

   * Assign a chatbot to handle live chat interactions automatically.
     * This allows your website live chat and chatbot to provide automated responses and gather customer information efficiently.
   * **Pro Tip:** Enable the **Require Contact Information** option. This will prompt customers to provide their email or phone number before starting the chat, making it easier for follow-ups.

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

### **Save and Implement the Plugin**

1. Once all settings are configured, click **Save**.
2. After saving, you’ll see a **JavaScript code** and a **Preview** option on the right side.

* Copy the JavaScript code provided, and add the code to the **footer section** of your website.

3. Using the preview:

The preview shows how the plugin will look to your customers, including the welcome message, popup title, and popup body. If needed, make adjustments to your settings and click **Save** again.

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

***

### Video Tutorial:

{% embed url="<https://youtu.be/44yVan40DFk?si=SgaWsuNXvicBjRuT>" %}

***

Hope this article helps you!