Embedding Guide
Guide to embedding Web Chat in your HTML page
On the Accounts and Integrations page of the Pattr 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.
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>
Under the Body, place the Full JS code into the
<body> tag of your website HTML. The Body code is available 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.
Option | Default | |
token (required) | – | Web Chat Embed Token |
mode | floating | 'inline' or 'floating' |
entryPoint | – | Dialogue Entry Point ID |
profileData | – | User defined data |
theme | – |
The Web Chat Embed exposes a promise based API that you can use to customise or interact with your Web Chat instance through Javascript.
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'},
});
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;
}
You can use the following snippet to wire up the display of the Webchat to an action performed on an 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>
Last modified 8mo ago