Browse Guides

Halo Live Chat - Embedded on Other Sites
Reading mode
Copy Link
Link Copied!
Print
Feedback
This guide has multiple versions available:
<style>p { margin: 0; }span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left:0; padding-left:5px;}blockquote blockquote{ border-color: #00bcd4; color: #00bcd4;}blockquote blockquote blockquote{ border-color: #43a047; color: #43a047;} table.grid{ border-collapse: collapse;} table.grid td, table.grid th { border: 1px solid #ddd;} .fr-fic.fr-dib{ display: block; margin: 5px auto;}.fr-fic.fr-dib.fr-fir{ text-align: right; margin: 5px 0 5px auto;}.fr-fic.fr-dib.fr-fil{ text-align: left; margin: 5px auto 5px 0;}.fr-fic.fr-dii{ float: none; margin: 5px auto;}.fr-fic.fr-dii.fr-fil{ float: left; margin: 5px auto;}.fr-fic.fr-dii.fr-fir{ float: right; margin: 5px auto;}img.fr-dib.fr-fir { margin-right: 0; text-align: right;}img.fr-dib.fr-fil { margin-left: 0; text-align: left;}img.fr-dib { margin: 5px auto; display: block; float: none;}img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC;}img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc;}img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;}</style><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } .fr-fic.fr-dii { float: none; margin: 5px auto; } .fr-fic.fr-dii.fr-fil { float: left; margin: 5px auto; } .fr-fic.fr-dii.fr-fir { float: right; margin: 5px auto; } img.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-dib { margin: 5px auto; display: block; float: none; } img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC; } img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc; } img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } </style><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } .fr-fic.fr-dii { float: none; margin: 5px auto; } .fr-fic.fr-dii.fr-fil { float: left; margin: 5px auto; } .fr-fic.fr-dii.fr-fir { float: right; margin: 5px auto; } img.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-dib { margin: 5px auto; display: block; float: none; } img.fr-bordered { box-sizing: content-box; border: solid 5px #CCC; } img.fr-shadow { box-shadow: 10px 10px 5px 0px #cccccc; } img.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } </style><style> p { margin: 0; } span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } blockquote { border-left: solid 2px #5e35b1; color: #5e35b1; margin-left: 0; padding-left: 5px; } blockquote blockquote { border-color: #00bcd4; color: #00bcd4; } blockquote blockquote blockquote { border-color: #43a047; color: #43a047; } table.grid { border-collapse: collapse; } table.grid td, table.grid th { border: 1px solid #ddd; } .fr-fic.fr-dib { display: block; margin: 5px auto; } .fr-fic.fr-dib.fr-fir { text-align: right; margin: 5px 0 5px auto; } .fr-fic.fr-dib.fr-fil { text-align: left; margin: 5px auto 5px 0; } .fr-fic.fr-dii { float: none; margin: 5px auto; } .fr-fic.fr-dii.fr-fil { float: left; margin: 5px auto; } .fr-fic.fr-dii.fr-fir { float: right; margin: 5px auto; } </style><p id="isPasted" style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong>In this guide we will cover:</strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong>- Embedding Live Chat on Other Sites</strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong>- Populate custom fields with data from a chat session started by the Events API of the chat Embeddable Widget</strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong id="isPasted"><span style="font-size: 14pt;">Embedding Live Chat on Other Sites</span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;">Within the Chat Profile configuration, set &quot;Access&quot; to &quot;Self-Service Portal &amp; External Websites&quot;. This will allow the chat profile to be used without being logged into Halo as a user.</p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit;"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;">If used on the Self Service Portal, chat will now show without being logged in.</p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit;"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;">The chat client can be embedded onto other websites by following the instructions within the &quot;Embed on External Website&quot; section of the chat profile config page. This involves adding some JavaScript to the body of the site.</p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br style="box-sizing: inherit;"></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&lt;div id=&quot;halo-chat&quot;&gt;&lt;/div&gt;</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&lt;script&gt;</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&nbsp; var haloChatConfig = {</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&nbsp; &nbsp; chatServiceUrl: &quot;your chat API url&quot;,</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&nbsp; &nbsp; configId: &quot;chat profile id&quot;,</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&nbsp; &nbsp; configKey: &quot;your chat profile key&quot;,</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&nbsp; }</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&lt;/script&gt;</span><br style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><span style="box-sizing: inherit; color: rgb(0, 0, 0); font-family: monospace; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(238, 238, 238); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">&lt;script src=&quot;https://yourhalourl.haloitsm.com/chat/index.js&quot;&gt;&lt;/script&gt;</span></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><strong id="isPasted"><span style="font-size: 14pt;">Override chat behaviour when embedded into other sites</span></strong></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><span style="font-size: 11pt;">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</span></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><span style="font-size: 11pt;">In order to do this you will need to use the &quot;haloChat_inboundEvent_initialize&quot; event of the Chat Widget Events API in your JavaScript, here you can specify overriding properties. For example:</span></p><p style="box-sizing: inherit; margin: 0px; line-height: 1.4285em;"><br></p><p id="isPasted"><em>window.dispatchEvent(new CustomEvent(&quot;haloChat_inboundEvent_initialize&quot;, { detail: { configId: &quot;123456&quot;, configKey: &quot;abcdefg&quot;, colour: &quot;red&quot; } }));</em></p><p><br></p><p>This will initialise the Halo Chat Widget with chat profile ID &quot;123456&quot; and override the colour of the widget to red.&nbsp;</p><p><br></p><p id="isPasted"><strong><em>Note: If an existing chat is open and a different Chat flow is initialised the previous chat will be removed.</em></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Override the Start step of the chat profile</span></strong></p><p>To do this you must first head into the configuration for the chat profile you are embedding into your website &gt; bot flow &gt; edit the step you would like the profile to be able to start at. Here, you will need to enable &#39;Chat can start from this step&#39;.&nbsp;</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImE0NjE1NzEwLThlZWMtNDEyZC05NWU2LWM3YjRhYmE1YzJmYSJ9.wD9JBk90ghF35w82PtEL8HpN5TD3DnviVscR-NR8faM" class="fr-fic fr-fil fr-dib" width="1048" height="337"></p><p><strong><span style="font-size: 10pt;">Fig 1. Allow chat to start from this step setting&nbsp;</span></strong></p><p><br></p><p>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.&nbsp;</p><p><br></p><p>Once this is set you can specify the start step override in your event arguments, for example:</p><p><br></p><p id="isPasted"><em>window.dispatchEvent(new CustomEvent(&quot;haloChat_inboundEvent_openChatWindow&quot;, { detail: { id_token: idToken, retainPreviousChat: true, startStepOverride: 9 } }));</em></p><p><br></p><p>In the above example the chat will start at step 9.&nbsp;</p><p><br></p><p>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 <a data-fr-linked="true" href="https://usehalo.com/haloitsm/guides/2294/" id="isPasted" target="_blank" rel="noopener noreferrer">here</a>.&nbsp;</p><p><br></p><p><strong><span style="font-size: 14pt;">Populate custom fields with data from a chat session started by the Events API of the chat Embeddable Widget</span></strong></p><p>You can have chat data automatically stored in custom fields when the chat is started, these custom fields can be used for various purposes. This is only applicable to chats started from an embedded chat widget.&nbsp;</p><p><br></p><p>Create a chat custom field by heading to configuration &gt; custom objects &gt; custom fields &gt; change entity to chat &gt; new.</p><p><img data-fr-image-pasted="true" src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE0MDJlYWI4LTgzMGItNDE3Yy04NDBlLWNiOTdjYjliZTY0OSJ9.P0uX7Zx7eaNVFgFnQfjAbA37MfOdMrh0o3nJe2H2A_k" width="521" height="146" style="box-sizing: inherit; border-style: none; cursor: pointer; padding: 0px 1px; user-select: none; text-align: left; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; width: 523px; height: 145.926px; max-width: none !important;" id="isPasted" class="fr-fil fr-dib"></p><p><strong><span style="font-size: 10pt;">Fig 2. Chat custom fields</span></strong></p><p><br></p><p id="isPasted">When a JWT identity token is created to log the user into chat, include the values of the custom fields as claims in the JWT, with the claim type as either the database name of the custom field (CFfieldName), or the label of the custom field. When that JWT is sent to the Chat endpoint and the chat is created, the custom field values will be extracted from token and written to the database.</p><p><br></p><p>Chat custom fields can be used:</p><ul><li>As conditions in chat flows to determine the journey of the conversation.</li><li>In synchronous runbooks started from the chat by a chat flow step or virtual agent.</li><li>To sync values to ticket custom fields with the same label when creating a ticket from chat.</li></ul><p><strong><em>Note: Unlike Custom Fields on other entities, these don&#39;t show anywhere in the UI. They are used to store data relating to a Chat session, and can only be set when using the Events API of the chat Embeddable Widget.</em></strong></p><p><br></p><p>It is possible to avoid sending User information to the client via the JWT when launching a chat. This method requires you to POST the user fields that would normally be mapped in the JWT as claims, to a new endpoint in the Halo API (<strong>&quot;https://&lt;HALOURL&gt;/api/ChatMatchingData&quot;</strong>). This endpoint requires authentication and permission to &quot;Read &amp; Modify Users&quot;.</p><p><br></p><p>An example request body would contain:</p><p><br></p><p>[</p><p>&nbsp; {</p><p>&nbsp; &nbsp; &nbsp; &quot;json_content&quot; :&nbsp;</p><p>&nbsp; &nbsp; &nbsp; {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;firstname&quot;: &quot;John&quot;,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;lastname&quot;: &quot;Doe&quot;,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;username&quot;: &quot;John Doe&quot;,</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &quot;email&quot;: &quot;<a data-fr-linked="true" href="mailto:example.email@halo.com">example.email@halo.com</a>&quot;</p><p>&nbsp; &nbsp; &nbsp; }</p><p>&nbsp; }</p><p>]</p><p><br></p><p>You can add any number of JSON properties to the &quot;json_content&quot; property. They will use the field mappings specified in the Chat Profile Identity Token mappings.</p><p><br></p><p>A successful POST to the /ChatMatchingData endpoint will be indicted by a &quot;201 Created&quot; response and a Response object containing a GUID and a Key. These will be valid for 24 hours unless specified as single use. The GUID and Key can then be added to your JWT which is sent to the client and used to launch the User&#39;s chat with the following Claim names:</p><p><br></p><p>&quot;chatmatchingdataguid&quot;</p><p>&quot;chatmatchingdatakey&quot;</p><p><br></p><p>You no longer need to include PII in the JWT with this method as it will be matched and handled within the Halo API.</p><p><br></p><p><strong><span style="font-size: 12pt;">Progress the chat based on a chat custom field</span></strong></p><p>The chat flow can be configured to run an evaluation against a chat custom field, and have the chat progress based on the value in this field.&nbsp;</p><p><br></p><p>To do this add a &#39;condition&#39; step to the chat profile flow, then in the criteria table, choose your chat custom field as the field to base criteria on.&nbsp;</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFjNGY5MjYzLTM2NWItNDg4Mi05ZWYwLThmNzkxZWRiNjcyNiJ9.LfXOFcShzfmiEPSI1q2CDUjmdta0vO8KbsscZ78u70Y" class="fr-fic fr-fil fr-dib" width="1518" style="width: 1520px; height: 643.312px;" height="643"></p><p><strong><span style="font-size: 10pt;">Fig 3. Chat flow condition based on chat custom field</span></strong></p><p><br></p><p><strong><span style="font-size: 12pt;">Sync values to ticket custom fields with the same label when creating a ticket from chat</span></strong></p><p>To have chat custom field values sync into a chat custom field you will need to head to configuration &gt; custom objects &gt; change entity to chat &gt; new, here create the custom field.&nbsp;</p><p><br></p><p>Then create a ticket custom field with the exact same name and ensure this field is assigned to the ticket type that is logged from the chat. Now when this ticket type is logged from a chat embedded in another site, the ticket custom field will be populated with the same data contained within the chat custom field. The value that the chat custom field is populated with will be determined by the claims in the JWT for the embedded chat widget.&nbsp;</p><p><br></p>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.