HaloITSM

HaloITSM Guides

Documentation to assist with the setup and configuration of the HaloITSM platform

Guides > Halo Live Chat - Embedded on Other Sites

Halo Live Chat - Embedded on Other Sites

In this guide we will cover:

- Embedding Live Chat on Other Sites



Embedding Live Chat on Other Sites

Within the Chat Profile configuration, set "Access" to "Self-Service Portal & External Websites". This will allow the chat profile to be used without being logged into Halo as a user.


If used on the Self Service Portal, chat will now show without being logged in.


The chat client can be embedded onto other websites by following the instructions within the "Embed on External Website" section of the chat profile config page. This involves adding some JavaScript to the body of the site.


<div id="halo-chat"></div>
<script>
  var haloChatConfig = {
    chatServiceUrl: "your chat API url",
    configId: "chat profile id",
    configKey: "your chat profile key",
  }
</script>
<script src="https://yourhalourl.haloitsm.com/chat/index.js"></script>




Override chat behaviour when embedded into other sites (v2.182+)

When the Halo chatbot is embedded into other sites you can override certain properties of the chat profile based on criteria on your webpage, including, the chat profile used, the step the chat starts at and appearance of the chat profile. This is done using the JavaScript in the body of your site


In order to do this you will need to use the "haloChat_inboundEvent_initialize" event of the Chat Widget Events API in your JavaScript, here you can specify overriding properties. For example:


window.dispatchEvent(new CustomEvent("haloChat_inboundEvent_initialize", { detail: { configId: "123456", configKey: "abcdefg", colour: "red" } }));


This will initialise the Halo Chat Widget with chat profile ID "123456" and override the colour of the widget to red. 


Note: If an existing chat is open and a different Chat flow is initialised the previous chat will be removed.


Override the Start step of the chat profile

To do this you must first head into the configuration for the chat profile you are embedding into your website > bot flow > edit the step you would like the profile to be able to start at. Here, you will need to enable 'Chat can start from this step'. 

Fig 1. Allow chat to start from this step setting 


In order for the start step of a chat to be overridden using JavaScript this setting must be enabled against the step you would like to override with. Enabling this will not cause the chat to start at this step when being used in the Halo portal/agent app. 


Once this is set you can specify the start step override in your event arguments, for example:


window.dispatchEvent(new CustomEvent("haloChat_inboundEvent_openChatWindow", { detail: { id_token: idToken, retainPreviousChat: true, startStepOverride: 9 } }));


In the above example the chat will start at step 9. 


For more information on this and a list of overrides that can be made to the embedded chatbot, along with the required arguments, check out our article here. 

Popular Guides

Pin It on Pinterest