Embedding Guide

Guide to embedding Web Chat in your HTML page

Installing Web Chat

On the Accounts and Integrations page of the Iris Platform, click on your Web Chat instance. You will have two code snippets to be installed on every page you would like to render Web Chat.

Header Code Snippet

Under the Header, place the Full JS code into the <head> tag of your website HTML. The Header code is avialble on the Platform: Accounts & Integrations page.

<script></script>

Body Code Snippet

Under the Body, place the Full JS code into the <body> tag of your website HTML. The Body code is avialble on the Platform: Accounts & Integrations page.

IrisWebChat.init(
{
// Token is mandatory
token: '<YOUR_TOKEN>',
// Mode is how you would like webchat to render.
mode: 'floating',
// Entrypoint is the Dialogue Entrypoint you would like to send users to.
entrypoint: '<ENTRY_POINT>',
// Theme is a JSON object representing the theme defaults you'd like to
// override. Take a look at ./app/src/theme/defaultTheme. This is optional.
theme: { brandName: 'Cool Webchat' },
// profileData is an object (string, number, JSON) that you would like to
// send along with the messages.
profileData: { foo: 'bar' },
// actionButtonHidden will, when set to true, cause the floating
// action button that opens the chat in 'floating' mode to be hidden.
actionButtonHidden: true,
// closedAcrossPages will cause the webchat to be in the "closed" state
// when you navigate across pages
closedAcrossPages: true,
// zIndex is the zIndex you would like the webchat container to have.
zIndex: 99999,
},
// This is a jQuery selector for where you would like webchat to mount, this
// is where to insert the divs that contain the iframe. By default, if you
// are in 'floating' mode this is "body", and if you are in 'inline' mode
// this is '#embed-chat'. This is optional.
'body',
);

The Body Code Snippet will require your token, each token is specific to the Web Chat instance.

Configuration

Option

Default

token (required)

Web Chat Embed Token

mode

floating

'inline' or 'floating'

entryPoint

Dialogue Entry Point ID

profileData

User defined data

theme

Theme Object

Styling Web Chat

Follow this guide to style your Web Chat: Styling Web Chat

Web Chat API

The Web Chat Embed exposes a promise based API that you can use to customise or interact with your Web Chat instance through Javascript.

Initialisation

When you've pasted in the full JS code into the <body> tag of your website HTML, you can modify certain options at initialisation time:

<script>
IrisWebChat.init({
token: '<YOUR TOKEN>',
// actionButtonHidden, when set to true will cause
// the floating webchat button to be set to hidden
// This will have no effect in `inline` mode
// and is optional
actionButtonHidden: true,
// closedAcrossPages causes the webchat to be in
// a 'closed' state when you navigate across page
// including refreshing your current page.
// Normally webchat will stay open if you navigate
// to a page on the same domain when webchat is
// already open.
closedAcrossPages: true,
// Profile data is any object that you would like
// to have sent along with messages. It is optional.
profileData: {foo: 'bar', baz: 'boz'},
});

Webchat Instance API Methods

The WebChat instance that is returned post-initialization exposes many instance methods that can be used to interrogate the Webchat's current state or to hide or show the chat window and action button.

interface IrisWebChatInstance{
// getProfileData returns the profileData prop, or whatever was last set with
// setProfileData
getProfileData(): object;
// setProfileData will set the value of the profileData prop. This will cause
// the new profileData to be sent along with any new messages.
setProfileData(profileData: object): void;
// getOpen returns the "open" state of the webchat. In 'inline' mode open
// means the get started button has been pressed. In 'floating' mode open
// means the chat window is visible.
getOpen(): boolean;
// setOpen will set the open state of the webchat.
setOpen(open: boolean): void;
// toggleOpen will toggle the open state of the webchat, and return what the
// current (post-set) value is.
toggleOpen(): boolean;
// getActionButtonHidden will return the value of
// 'actionButtonHidden'. See documentation in props for what this does.
getActionButtonHidden(): boolean;
// setActionButtonHidden will set the value of
// 'actionButtonHidden' after the webchat has loaded. See documentation
// in props for what this does.
setActionButtonHidden(actionButtonHidden: boolean): void;
// toggleActionButtonHidden will toggle the actionButtonHidden
// value, returning what the current (post-set) value is
toggleActionButtonHidden(): boolean;
}

Webchat Instance API Example

You can use the following snippet to wire up the display of the Webchat to an action performed on a a HTML element in your website.

<script>
IrisWebChat.init({
token: '<YOUR TOKEN>',
actionButtonHidden: true,
closedAcrossPages: true,
}).then(instance => {
document.getElementById('contactUs').addEventListener('click', () => {
instance.setOpen(true);
});
});
</script>