Website Chat Widget
Add the ISMessenger Web Chat Widget to your site.
Last updated
Add the ISMessenger Web Chat Widget to your site.
Last updated
The Web Chat Widget allows website visitors to contact you via live chat or through other you have connected.
Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels
Step 2: Add Channel Press Add Channel and choose Web Chat. The Connecting Web Chat Widget dialog should open up.
Step 3: Specify Website Fill in the website(s) where the Widget will be added.
If the user adds https://app.is-global.com/ then only https://app.is-global.com/ will be whitelisted. Any other subdomain or root should not work.
If the user adds https://*.is-global.com/ , then all subdomains including the root domain will be whitelisted.
If the user adds https://is-global.com/ , then only the root domain will be whitelisted.
Step 4: Select a Theme Color Using the interactive color picker, select a theme color for the chat widget.
Step 5: Select a Display Icon for the Widget Choose an icon that would like to show on the website for the widget. If you prefer to upload a customised icon, you can upload a square icon with a recommended size of 256px x 256px.
Step 6: Follow through the steps at the platform Once you have specified the necessary, press NEXT to follow through.
Step 7. Install the Script You can add the generated script to your preferred website. Alternatively, you can send the installation instructions to someone else via email.
You may require a webmaster or technical admin to assist in installing the chat widget on the website. Please seek assistance if necessary!
Depending on what system you use to create and manage your website, we have created a step by step guides to walk you through installing a Chat Widget onto your website.
For other platform or services, navigate to HTML source of the page. Paste the script before the </body> tag.
If you require assistance, you can choose to forward the script along with installation instructions to your website administrator. Select the respective checkbox and enter the email address of someone who can help you install the chat plugin.
The IS-Messenger Web Chat Widget will appear on your site once the script has been successfully installed.
Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels
Step 2: Locate the Web Chat channel Once you have located the Web Chat channel, press CUSTOMIZE
3. Press the Customize button for the Web Chat.
On the right side of the page, there is a preview of website chat widget. Any customization made to the widget will reflect on the widget. This helps users to get a better idea of what they are customizing.
You may customize the following to change the display appearance of the widget on the website
Theme Color
The chosen color will be used as the primary color of your widget.
Text Color
The chosen color will be used as the primary text color of your widget.
Website Chat Icon
The selected icon is used inside the widget bubble together with the Theme Color. You can upload a custom icon if necessary.
Popup Message
The Popup Message is shown to website visitors once per day 5 seconds after the page load. If not defined, no popup message will appear to the website visitors.
Align To
User can choose to specify a position whether to display the widget on the left or right of the platform
Vertical Spacing
User can specify the amount of vertical spacing between the website chat widget and the bottom of the screen
Horizontal Spacing
User can specify the amount of horizontal spacing between the website chat widget and the side of the screen
Widget Size
User can choose the size of the widget from Small, Standard or Large.
Display Options
User can choose to display this widget on desktop, mobile devices or both
Field
Description
Title
The Title will show at the top of your chat widget
Tagline
The Tagline will be displayed under the title
Website Chat Logo
Drop your logo image here so it will show at the top of the Website Chat. The format can either be in PNG, SVG or JPG and the file size is not more than 1.0 MB.
Channel Icons
This option will enable contacts to contact you through their preferred channel providing the options are given. You can add up to six channels and it will be shown at the top of the Website Chat Widget.
If the Website Chat Widget has never been configured before, connected channels with adequate information will be listed by default as Widget channel links.
You may add the widget channel links and specify the necessary information for the selected channel.
Here is the list of Input Field required for each of the Channel Links supported.
WhatsApp Phone Number
Facebook Messenger
Facebook Page ID
Telegram
Telegram Botname
Twitter ID
LINE
LINE ID
Viber
Viber Public Account Name
SMS
SMS Phone Number
Email Address
Phone Call
Phone Number
Custom Link
URL Address and Icon
Custom QR
QR Image and Icon
Enabling this option will add a pre-chat form to your Website Chat. If enabled, your website visitors will be presented with a form to fill before they start the chat.
With this option enabled, you can include additional custom fields when necessary. In addition to that, you can also customize the label for the default fields on how they appear to your contacts.
You may customize the following to change the appearance of the widget on the website.
Field
Description
Theme Color
The chosen color will be used as the primary color of your widget
Text Color
The chosen color will be used as the primary text color of your widget
Title
The Title will show at the top of your chat widget
Tagline
The Tagline will be displayed under the the title
Input Bar Text
This text will function as a placeholder in the typing area
Web Chat Icon
The display icon is shown on the website for user to interact with web chat
Widget Position
User can choose to specify a position whether to display the widget on the left or right of the platform
Field
Description
Input Bar Text
This text will function as a placeholder in the typing area
Text Font
The font that will be used to display the font in the website chat widget
When this option is checked, the website visitor does not have an option to attach an attachment in the website chat widget.
When using this option the widget will be completely hidden. Until the Anchor Reference has been clicked or when the chat is opened via the programmatic API.
Using the above anchor you can create a button on your page, to open the widget once clicked.
Using this option you can remove the IS-Messenger Branding from your Widget.
Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels
Step 2: Locate the Website Chat channel Once you have located the Website Chat channel, press Configure
Step 3: Make the necessary configuration
You can configure the following:
Channel Name - Name used internally to identify the account
Website Domains - The website on which the widget is to be installed.
Important: If you do not add your website to this list, your widget will not load. You can enter multiple URLs if you plan on installing the plugin to multiple websites.
Step 4: Update the configuration Press Done to update the channel configuration
The logged-in users of your website can be identified by adding a simple JavaScript code in your website code. Once the identifier passed is matched with an existing contact, the current conversation will be resumed.
Guide on how to use the code
Paste the code right in the head tag of every page where you want the website chat to appear.
The script for identifying logged-in users must be placed above the website chat code that can be found in the website chat configuration dialog.
Please note that if you are using this feature, the pre-chat form will be ignored which means contacts do not need to fill up their information before initiating a conversation.
The example above is passing email address as identifier and during contact creation process, all the contact fields passed will be stored.
The Website Chat Widget can be opened and closed via your Website JavaScript code. This allows you to create a custom "Chat with us" button on your Website, and trigger the Website Chat Widget to open when a visitor clicks on the button.
Open chat
Description: Opens the chat widget.
Syntax: $respond.do("chat:open")
Close chat
Description: Closes the chat widget.
Syntax: $respond.do("chat:close")
Chatbox was opened
Description: Handles the chat widget opened event (triggers your callback function).
Syntax: $respond.on("chat:opened", callback)
Chatbox was closed
Description: Handles the chat widget closed event (triggers your callback function).
Syntax: $respond.on("chat:closed", callback)
Is chat open?
Description: Returns true if the chat widget is opened, else false.
Syntax: $respond.is("chat:open")
Is chat closed?
Description: Returns true if the chat widget is closed, else false.
Syntax: $respond.is("chat:closed")
There could be a few reasons why the messages failed:-
Contact has left the website
Contact's inactivity may exceed the timeout period
Contact's client may have internet connection issues
Make sure the code is installed correctly. Refer to the instructions here on how to install the website chat widget.
Be sure to whitelist the website where the widget is to be installed. Refer to Step 3 from this section on how to whitelist your domain.
Widget Channel Links
This option will enable contacts to contact you through their preferred channel providing the options are given. You can add up to six channels and it will be shown at the top of the Web Chat Widget.
If the Web Chat Widget has never been configured before, connected channels with adequate information will be listed by default as Widget channel Links
You may add the widget channel links and specify the necessary information for the selected channel.
Here is the list of Input Field required for each of the Channel Links supported.
Channel Links
Input Field Required
WhatsApp Phone Number
Facebook Messenger
Facebook Page ID
Telegram
Telegram Botname
Twitter ID
LINE
LINE ID
Viber
Viber Public Account Name
SMS
SMS Phone Number
Email Address
Phone Call
Phone Number
Drop your logo image here so it will show at the top of the Web Chat. The format can either be in PNG, SVG or JPG and file size is not more than 1.0 MB.
Show Greeting Message Pop Up
When this option is selected, the ISMessenger widget will pop up with your greeting message and chat options after 5 seconds delay time.
Using this option you can remove the ISMessenger Branding from your Widget.
This option is not available on the Starter (Free) Plan.
When using this option the widget will be completely hidden. Until a the Anchor Reference has been clicked.
Using the above anchor you can create a button on your page, to open the widget once clicked.
Enabling this option will add a pre-chat form to your Web Chat. If enabled, your website visitor will not be able to chat until they fill out the form you have set up.
With this option enabled, you can include additional custom fields when necessary. In addition to that, you can also customize the label for the default fields on how they appear to your contacts.
Scroll further down and there will be a script to be added into your website.
Step 1: Navigate to Channel Settings From Settings Module, navigate to the menu item, Channels
Step 2: Locate the Web Chat channel Once you have located the Web Chat channel, press Configure
Step 3: Make the necessary configuration You can configure the following:
Channel Name - Name used internally to identify the account
Greeting Message - This message is the first message sent to contact when they message you through Web Chat.
Website Domains - The website of which the widget to be installed
Important: If you do not add your website to this list, your widget will not load. You can enter multiple URLs if you plan on installing the plugin to multiple websites.
Step 4: Update the configuration Press Done to update the channel configuration
The logged-in users of your website can be identified by adding a simple JavaScript code in your website code. Once the identifier passed is matched with an existing contact, the current conversation will be resumed.
Guide on how to use the code
Edit the code (given below) to send IS-Messenger the identifier of the currently logged-in user. This can be the email address or contact ID or based on any other contact field. Please note that identifier is a required field.
Paste the code right in the head tag of every page where you want the website chat to appear.
The script for identifying logged-in users must be placed above the website chat code that can be found in the website chat configuration dialog.
Please note that if you are using this feature, the pre-chat form will be ignored which means contacts do not need to fill up their information before initiating a conversation.
The example above is passing email address as identifier and during contact creation process, all the contact fields passed will be stored.
The Website Chat Widget can be opened and closed via your Website JavaScript code. This allows you to create a custom "Chat with us" button on your Website, and trigger the Website Chat Widget to open when a visitor clicks on the button.
Open chat
Description: Opens the chat widget.
Syntax: $respond.do("chat:open")
Close chat
Description: Closes the chat widget.
Syntax: $respond.do("chat:close")
Chatbox was opened
Description: Handles the chat widget opened event (triggers your callback function).
Syntax: $respond.on("chat:opened", callback)
Chatbox was closed
Description: Handles the chat widget closed event (triggers your callback function).
Syntax: $respond.on("chat:closed", callback)
Is chat open?
Description: Returns true if the chat widget is opened, else false.
Syntax: $respond.is("chat:open")
Is chat closed?
Description: Returns true if the chat widget is closed, else false.
Syntax: $respond.is("chat:closed")
There could be a few reasons why the messages failed:-
Contact has left the website
Contact's inactivity may exceed the timeout period
Contact's client may have internet connection issues
Make sure the code is installed correctly. Refer to the instructions on how to install the website chat widget.
Note: The term “user” is used in the context of your website. In the platform, we continue to refer them as “contacts”.
Edit the code (given below) to send the identifier of the currently logged-in user. This can be the email address or contact ID or based on any other contact field. Please note that identifier is a required field.
You can also send Contacts Fields associated with your contacts so we will store the contact field during the contact creation process. The field name (or slug) can be found in the Contact Fields module.
Having trouble with the channel? Contact us !
Note: The term “user” is used in the context of your website. In the platform, we continue to refer them as “contacts”.
You can also send Contacts Fields associated with your contacts so we will store the contact field during the contact creation process. The field name (or slug) can be found in the Contact Fields module.
Be sure to whitelist the website where the widget is to be installed. Refer to Step 3 from this on how to whitelist your domain.
