💬Connect your Website for a Chat Plugin

Learn how to add a website chat plugin to increase your conversion rate.

You need to have —

1. An Admin access to a team on MyAlice.

2. A fully functioning website.

Video Tutorial

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.

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

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'.

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.

Appearance

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

Under the Color and Design section, you can:

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:

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.

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.

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.

Content

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

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:

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:

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.

Advance

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

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.

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.

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.

<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 when the Widget is Opened

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.

 selector: '#myAliceWebChat',
  platformId: '12570',
  primaryId: '51b02300583e11ed979cbecceb818bde',
  token: 'cd4195e05296558703bba58840299a9b8efee11d972ed2bc',
  user: {
    full_name: 'John Doe',
    language: 'en',
    email: '[e-mail]',
    phone: '6593849023',
  },