# Connect your Website for a Chat Plugin

{% hint style="info" %}
You need to have — 

1. An Admin access to a team on MyAlice.
2. A fully functioning website.
   {% endhint %}

### Video Tutorial

{% embed url="<https://www.youtube.com/watch?index=15&list=PL_EdxcvIGFEagxlG7c7rMCg62UA9pPdMk&v=d9lGe5_1XPo>" %}

## Use Cases of a Live Chat Plugin

Adding the MyAlice live chat plugin on your website will allow you to:

1. Add an interface on your website that allows your customers/visitors to chat with you.
2. Create a prompt/welcome message on your live chat to welcome your visitors.
3. Push custom notifications on different website pages.
4. Build chatbots within to automate a lot of the interactions.
5. Embed multiple channels within one widget to offer options to your users.

Additionally, you can manage messages, comments, and e-commerce orders from other platforms in the same inbox.

## How to Add a Live Chat Plugin on your Website

Step 1: Go to Integration from the left navigation bar and under Available Integrations, select Live Chat Plugin.

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

Step 2: Add a name for the channel and generate the code.

<figure><img src="/files/6fNnr5wHtDxS9VjgJipk" alt=""><figcaption></figcaption></figure>

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

Copy this code and click on Finish. Afterwards, to launch the plugin, paste the code in the footer of your website. Once you've added it, you'll see the MyAlice Live Chat Plugin appear on the bottom right of your website.

## Customize the Plugin to your Needs

The MyAlice plugin offers a wide range of customizations that you can do to fit your brand and needs. To open the customization window, go to Integrations, click on the options against the channel you created for your website and click on 'Edit'.

<figure><img src="/files/7pybah0uIJYMYzmVCNB0" alt=""><figcaption></figcaption></figure>

The customizations are divided into different categories. You'll also notice a preview window on the right that will show you how your selections will appear in real time.&#x20;

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

### Appearance

In the Appearance section, you can customize how the plugin will look to your users.&#x20;

Under the Color and Design section, you can:&#x20;

<figure><img src="/files/8CzVDaLTPrEPRPWQBPHM" alt=""><figcaption></figcaption></figure>

1. Change the name of the plugin for your users.
2. Change the color of the widget to your brand guidelines (clicking on the + icon will allow you to explore further within the color spectrum).
3. Dig deep and change the how the colors of the texts and icons.
4. Select if you'd like the avatars of your agents appear within the widget
5. Select if you'd like to remove the MyAlice Branding from the widget (only available for paid subscriptions)

Under the Position and Visibility section, you can:

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

1. Select how you want the chat icon to appear. You can choose between adding just an icon, or add a text with the icon or just show a text.
2. Select the icon within the chat head. You can upload your own brand's logo or you can use the default ones.
3. Select the color of the chat head, as appropriate with your website.
4. Select where on the website the widget should appear, either on the left side or the right side.&#x20;
5. Even configure the exact height of where the widget should appear.

### Channels

Here you can add multiple channels for your users to choose their preferred mode of communication. Meaning, once someone opens up the widget, they will be able to select if they want to speak to you on a different channel such as WhatsApp, Facebook Messenger etc. Turn on the toggle against each of the channel names to add it to the list.

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

Only the channels you have connected to MyAlice will appear here. So make sure you have connected them before from the Integration> Available Integration section. You can also sort the sequence in which they'll appear by dragging them one before another.&#x20;

### Content

In the content section, you can actually design the journey your users will take within the widget to communicate with you.&#x20;

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

Under the 'Greetings' section, you can set up how the widget will appear to the user the first time, before they have actually clicked and opened the widget. You can:

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

1. Select the title of the greetings message that you want to show. This will appear on top and will be in bold.
2. Select whether you want the message to be always visible or not be visible at all.
3. Customize the greeting message based on your operational hours. You'll be able to set an Online Greeting and an Offline Greeting message. This will appear just below the Title.
4. Select how the greeting will be shown to the user. You can select between showing just the texts or show more information such as your agents' avatar, the channels that you've added etc.
5. Select if you want the greetings to show once the website is opened on a mobile device.

Under the 'Pre-chat Survey' section, you can design an onboarding flow for the users and collect their information before you let them get in touch with you. This will trigger when the users click on the Chat Head icon. You can use this option to make sure you have the necessary information required to support and speak to this user. You can:

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

1. Select when to trigger this survey. It can be all the time, within business hours or outside business hours or just never. Select one that fits your purpose.
2. Add a text explaining the purpose of the survey before asking them the survey questions.
3. Select the information you'd like to collect. Standard information you might need is their email and full name. You can also set your own fields and save them under an attribute so that you can use them later.

Once the user completes the survey, the Welcome Message sequence for your channel on the 'Automation' tab will trigger. You can design an automated flow of conversation, adding different text and buttons to direct the users. Or you can just add a text asking them how you can help them. Their reply will then initiate a conversation on our Inbox.&#x20;

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

### Advanced

Under the 'Advance' section, you can customize a few more advanced aspects of the widget. You can:&#x20;

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

1. Add multiple domains (i.e. sites) where you want the plugin to function.
2. Enable sound notifications for the users.
3. Enable the option for the user to send attachments within the widget.
4. Enable the option for the users to access the previous conversations they've had with you through the widget.

### Installation

This is where you'll see the code snippet you were provided with the first time you tried to set up the live chat. This is to make sure you can use this if you need for any future occasions.

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

As you can see, there are a lot of customization opportunities available for you. Make the most of it and make sure you're utilizing the Preview option to align with each of the changes in real time so that you don't face any surprises. &#x20;

## Add a Click to Chat Button on your Site

You can add a custom button on your site to trigger the live chat widget. You can also connect an existing button with the widget through this.

To do it, add the following JavaScript to your site:

> Assume you want to open the chat widget if user clicks on any of your website link / button / any element. Add `chat-trigger` class in all the elements that you want to trigger our chat widget.

```javascript
<script>
    document.querySelectorAll('.chat-trigger').forEach(chat=>{
        chat.addEventListener('click', function (e){
            e.preventDefault();
            document.getElementById("mawc").childNodes[0].childNodes[0].click()
        })
    })
</script>
```

## Pass Relevant Customer Information and Retain Conversation History

{% hint style="info" %}
This is especially useful if you have some chatbot automations built on your live chat and you'd like to use customer information such as their email and phone number when they login to your website and access the chat widget.
{% endhint %}

{% hint style="info" %}
Since **email** is used to manage live chat customers on MyAlice, if you're passing this information, it'll be used to check if that customer has previously interacted with your platform and if so, their conversation history will be automatically retained for them.
{% endhint %}

```javascript
 selector: '#myAliceWebChat',
  platformId: '12570',
  primaryId: '51b02300583e11ed979cbecceb818bde',
  token: 'cd4195e05296558703bba58840299a9b8efee11d972ed2bc',
  user: {
    full_name: 'John Doe',
    language: 'en',
    email: 'johndoe@gmail.com',
    phone: '6593849023',
    account_number: '11704912769'
  },
```

{% hint style="info" %}
If you'd like to use phone instead email to retain conversation history of a customer, pass an additional key called **unique\_id** to indicate that identifier.&#x20;
{% endhint %}

```javascript
 selector: '#myAliceWebChat',
  platformId: '12570',
  primaryId: '51b02300583e11ed979cbecceb818bde',
  token: 'cd4195e05296558703bba58840299a9b8efee11d972ed2bc',
  user: {
    full_name: 'John Doe',
    language: 'en',
    account_number: '11704912769',
    email: 'johndoe@gmail.com',
    phone: '6593849023',
    unique_id: 'phone'
  },
```

## Introduce Localization to the Widget Content

The Live Chat Widget supports localization, allowing you to display widget content in multiple languages based on your visitor’s language preference.

### How it works

You can define localized content directly from the **Dashboard**. Each text input field supports **JSON** data with language codes as keys.

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

#### Example

```
{
  "en": "Hello",
  "es": "Hola",
  "fr": "Bonjour"
}

```

When a user visits your website, the widget automatically detects or uses the provided language code and displays the correct translation.

{% hint style="info" %}
It is recommended to include a default key as a fallback wherever you're using localization. The `df` key works as the fallback and will be used if no language key provided/found or if the provided language key wasn't mapped for in the JSON.&#x20;

```javascript
{
  "en": "Hello",
  "es": "Hola",
  "fr": "Bonjour",
  "df": "Hello" 
}
```

{% endhint %}

### Adding user\_lang in your Script

To have full control over the localization, include the `user_lang` parameter and pass the relevant language key under the user object in the JavaScript of the widget.

#### Example

{% code overflow="wrap" %}

```json
<script> !function(){var e=document.createElement("div");e.id="myAliceWebChat";var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://livechat.myalice.ai/index.js";var a=document.body.getElementsByTagName("script");(a=a[a.length-1]).parentNode.insertBefore(t,a),a.parentNode.insertBefore(e,a),t.addEventListener("load",function(){MyAliceWebChat.init({selector:"#myAliceWebChat",platformId:"12570",primaryId:"51b02300583e11ed979cbecceb818bde",token:"cd4195e05296558703bba58840299a9b8efee11d972ed2bc",user: {"email: test@myalice.ai,"user_lang": "en"}})})}(); </script>
```

{% endcode %}

{% hint style="info" %}
You can dynamically set `user_lang` based on your website’s language or your visitor’s browser settings:

```
user_lang: navigator.language.split('-')[0]
```

{% endhint %}

### Supported Language Format

Use **ISO 639-1** two-letter language codes (e.g., `en`, `es`, `fr`, `ar`, `bn`, `zh`).

### Fallback Mechanism

If a translation for the specified `user_lang` is not available, the system will first look for any fallback (`df` key) that you've set in the input field on the dashboard. If not, the system will check the users browser language and load the content accordingly.&#x20;

### Brining it Together

If your greeting field in the dashboard contains:

```json
{
  "en": "Hello! How can we help you?",
  "ar": "مرحبًا! كيف يمكننا مساعدتك؟"
}
```

And the script is set as:&#x20;

{% code overflow="wrap" %}

```json
<script> !function(){var e=document.createElement("div");e.id="myAliceWebChat";var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://livechat.myalice.ai/index.js";var a=document.body.getElementsByTagName("script");(a=a[a.length-1]).parentNode.insertBefore(t,a),a.parentNode.insertBefore(e,a),t.addEventListener("load",function(){MyAliceWebChat.init({selector:"#myAliceWebChat",platformId:"12570",primaryId:"51b02300583e11ed979cbecceb818bde",token:"cd4195e05296558703bba58840299a9b8efee11d972ed2bc",user: {"email: test@myalice.ai,"user_lang": "ar"}})})}(); </script>
```

{% endcode %}

The widget will display:

```
مرحبًا! كيف يمكننا مساعدتك؟
```


---

# 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.myalice.ai/connect-social-channels/connect-web-app/connect-live-chat.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.