πŸ’¬
Connect Your Web chat
Learn how to add a website chat plugin to increase your conversion rate.
You need to β€”
  1. 1.
    An Admin on MyAlice.
  2. 2.
    Have a fully functioning website.

Use Cases of Webchat Plugin

Adding the MyAlice webchat plugin on your website will allow you to:
  1. 1.
    Add a live chat widget on your website.
  2. 2.
    Create a prompt/welcome message on your live chat to welcome your visitors.
  3. 3.
    Push custom notifications on different website pages.
Additionally, you can manage messages, comments, and e-commerce orders from other platforms in the same inbox.

Add a Web Chat Widget on your Website

  1. 1.
    Go to Integration from the left navigation bar.
  2. 2.
    Under Available Integrations, select Website Plugin.
  3. 3.
    A connection window will appear from the right. Click on Next.
  4. 4.
    Upload a 256*256 px circle chat avatar and a title for your web chat plugin. Note that these will appear in public.
  5. 5.
    Paste your domain URL in the next field and press Enter.
  6. 6.
    Select a color for your chat, preferably your brand color.
  7. 7.
    Choose whether you want to keep the welcome message visible on your desktop/mobile browser, and where you want to place your live chat script: left or right.
  8. 8.
    Next, you can remove Chat by Alice from your web chat by clicking on the checklist. Please note that this is only applicable to our paid users.
  9. 9.
    You can also add an NLP app to your live chat channel.
After you are done with all the fields, click Next. Below is an example.
.
​
​
Publishing the channel means that the channel is live, along with the automation rules you have set for the channel. Some users prefer to publish their channel after they complete the automation flow. If you are one of them, please turn off the toggle for now. You can always turn it back on.
At this point, you should get a plugin script. Paste the code snippet inside the script tag in your website footer. Here's how the script should look when you're adding it to your website:
1
<script>
2
(function () {
3
var div = document.createElement('div');
4
div.id = 'icWebChat';
5
var script = document.createElement('script');
6
script.type = 'text/javascript';
7
script.async = true;
8
script.src = 'https://webchat.getalice.ai/index.js';
9
var lel = document.body.getElementsByTagName('script');
10
var el = lel[lel.length - 1];
11
el.parentNode.insertBefore(script, el);
12
el.parentNode.insertBefore(div, el);
13
script.addEventListener('load', function () {
14
ICWebChat.init({ selector: '#icWebChat',
15
platformId: '5374',
16
primaryId: 'edfbc9f68c4911ec92fa0242ac150008',
17
token: '91a16f90fa06b0d460a8cca1357151a24e8d2fac390942f6' });
18
});
19
})();
20
</script>
Copied!
​

Create a Welcome Message for Visitors

After you have connected the plugin, go to the Automation tab.
  1. 1.
    From the top-left corner, select your newly created live chat channel.
  2. 2.
    Go to Welcome Message and place a text block from the right bar.
  3. 3.
    Write down a message you'd like to show to your visitors and Save Changes.
  4. 4.
    Now whoever lands on your website will view the welcome message.
In your webchat plugin settings, you can choose to β€”
  • hide the welcome message unless the user clicks on the webchat icon
  • or make it pop up on both desktop and mobile browser.
Example of a visible prompt message on our website

Create a Basic Customer Journey

Say, you want to create a simple onboarding journey for your customers where you'll show them the Welcome Message, then collect a few information from them such as their name, email address, phone number etc and then create a ticket to connect them with an agent. Here's how:
  1. 1.
    Add a Redirect Block at the start of the Default Sequence and add a condition that will check their name, which will be 'Anonymous User' for any first time user, and navigate accordingly. Since the blocks in a sequence in a if/else manner, add a Text Block and Ticket Block after the Redirect Block so that you can connect with people who have completed this flow already.
Default Sequence loads by default when you receive a question that you haven't designed the bot for
2. Redirect to a sequence where you'll collect the users information using the User Input block. Use multiple input blocks one after another if you want to collect multiple information.
Save the responses to an attribute so that you can use them later
3. At the end of the sequence, add a Text Block with a confirmation message and a Ticket Block to create a ticket and bring the conversation to your Inbox.
Always a good practice to add a Resolved Sequence

Push Custom Notifications for Different Pages

Say, you want to show a different message for different pages on your website. Let's show you an example of how to trigger a different message on a pricing page.
  1. 1.
    Go to Automation and choose your webchat channel from the left top corner.
  2. 2.
    Add New Sequence and let's name it Pricing.
  3. 3.
    We place a Text Block from the right bar and write the message we want to show in that particular page and Save Changes.
  4. 4.
    Click on the link above to add new rules or modify current ones.
  5. 5.
    A pop-up window will appear from the right. Click on New Rule.
  6. 6.
    From the drop-down menu, select URL, paste the path of your desired URL where you want to push the message and click on Save.
For example, we pasted pricing/ to display the message on this page: https://myalice.ai/pricing/​
Any user landing on the page where you create the rule, will see the new message instead of the default welcome message.

Add a 'Click to Chat' Button on your Site

If you want to have the chat widget to pop up when any button or link is clicked on your website, you can add the following CSS to your site:
1
/**activate chat button with any element having a class 'chat-trigger'**/
2
document.querySelectorAll('.chat-trigger').forEach(chat=>{
3
chat.addEventListener('click', function (e){
4
e.preventDefault();
5
document.querySelector('div#icWebChat a').click()
6
})
7
})
Copied!

Edit Live Chat or Website Plugin Settings

From the Integration menu, select the Integrated tab. Here, you can view and manage your already connected channels.
Click on the triple dot (...) icon on each channel to edit channel settings, get the API key, disconnect or delete your channel.
From the edit menu, you can edit the following.
  • Chat avatar
  • Title or Preview Name
  • Whitelist domain
  • Chat color
  • Prompt message view
  • Widget position
You can also connect an NLP app to your website plugin.
Please refer to the following page to connect your NLP and train your chatbots to process, analyze and understand large amounts of natural language data.