Guides - Embedding a Ticket/Form onto your Website

Embedding a Ticket/Form onto your Website

This guide is part of a collection:

<head><style> .chartjs-size-monitor { display: none !important; height: 0 !important; overflow: hidden !important; }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></head><body><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; font-family: Poppins, sans-serif, Roboto; } 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>In this guide we will cover:-Embedding a Ticket on an external website  Embedding a Ticket on an external website Head to Configuration > Tickets > Ticket Types, select the Ticket Type you would like to embed. Within the Forms tab you will find the Anonymous Access & Embeddable section, from this section, copy the Embed code and embed this into your Website.  <img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImYxYzdiYzg5LTY4ZDItNDYzMS1iNmY2LTYwNzk1ZDVkZTI0ZSJ9.Zn1hawhPaf6f-Ik4oZ3mzA_Yqqxg47R9dF300lpen_s" class="fr-fic fr-fil fr-dib" width="1043" style="width: 1045px; height: 505.282px;" height="505">Fig 1. Ticket Embed Code Next you will need to add the website domain to the 'Global CORS whitelist'. For example: "halo.com". Once embedded, the Ticket form will show on your website. Note: Database Lookups are not supported on embedded Tickets. <img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjRmNzU5NzZiLTY1ZWEtNGRhYi1iNTMyLWMwNjA3OTVjMDQyYSJ9.r7oIakeuCd5HEAyLR3q-MKR5_mALX9atoE0sbm-UVF4" class="fr-fic fr-fil fr-dib" width="761" style="width: 763px; height: 637.837px;" height="638">Fig 2. Embedded Ticket When a Ticket is created using the embed form, the Ticket will appear in Halo with a source of "web". This will show against the Ticket if the "Source" field has been added to the Ticket Type. <img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImI1ZDhmZjdlLTY4YzktNGI1Yi1hM2YzLTU0MDk5Yzk4MDVkYSJ9.hTnIHIJ1yb8mc1CSkRZIDLDen-8b8QckjqWvddboD0Q" class="fr-fic fr-fil fr-dib" width="786" style="width: 788px; height: 449.137px;" height="449">Fig 3. Ticket with a source of "Web" The following lines of SQL can be used to establish a Ticket's source when reporting: <div style="color: #000000;background-color: #fffffe;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;" data-pasted="true">Select faultid, (select fvalue from lookup where fcode=frequestsource and fid=22) as [Ticket Source] from faults</div> <h2>Props</h2>All the basic props of the Widget are listed here.<table><thead><tr><th>Property</th><th>Type</th><th>Mandatory</th><th>Description</th></tr></thead><tbody><tr><td>haloApiUrl</td><td>string</td><td>true</td><td>Your Halo API url.</td></tr><tr><td>ticketTypeId</td><td>int</td><td>true</td><td>The id of the ticket type to use.</td></tr><tr><td>ticketTypeKey</td><td>string</td><td>true</td><td>The key of the ticket type to use. Only required if global anonymous access is disabled.</td></tr><tr><td>colour</td><td>string</td><td>false</td><td>The primary colour of buttons. Accepts a HEX colour. E.g #E83C4A.</td></tr><tr><td>languageId</td><td>int</td><td>false</td><td>Id of a language to use.</td></tr><tr><td>language</td><td>string</td><td>false</td><td>Code of a language to use. E.g "en-US"</td></tr><tr><td>organisationId</td><td>int</td><td>false</td><td>Id of an organisation. Used to determine branding.</td></tr><tr><td>accessToken</td><td>string</td><td>false</td><td>Specify a user or agent Halo access token to use chat whilst authenticated as a user or agent.</td></tr><tr><td>defaultSummary</td><td>string</td><td>false</td><td>Overriding default for the summary field.</td></tr><tr><td>defaultDetails</td><td>string</td><td>false</td><td>Overriding default for the details field.</td></tr><tr><td>debug</td><td>bool</td><td>false</td><td>When set to true, additional logging will show in the console.</td></tr><tr><td>hideContactDetails</td><td>bool</td><td>false</td><td>When set to true, the contact details (name, email and phone number) are hidden. Set this when you know the user is logged in and <code>getJwt</code> will return a token. Has no effect without <code>getJwt</code>. See <a href="#user-matching">User matching</a> for when they are shown again.</td></tr><tr><td>getJwt</td><td>function</td><td>false</td><td>Called when the form is submitted. Should return (or resolve to) a JWT identifying the user. See <a href="#user-matching">User matching</a>.</td></tr></tbody></table><h2> </h2><h2 id="user-matching">User matching</h2>If your visitors are already signed in to your own site, the ticket can be logged against their Halo user instead of asking for a name and email. A new user is created if no match is found.<ol><li>On the ticket type, enable embedded form user matching and set an identity token secret key, a site for new users and any claim mappings.</li><li>On your server, sign a JWT with the secret key using HS256. It must include <code>exp</code>, and <code>sub</code> is used to match the user. Map other claims, such as the email address, to user fields with the claim mappings.</li><li>Pass a <code>getJwt</code> function that fetches the token from your server. It is only called when the form is submitted, and can be async.</li></ol><pre><code><script> var haloFormConfig = { haloApiUrl: "https://yourhalo.com/api", ticketTypeId: 1, ticketTypeKey: "your-ticket-type-key", hideContactDetails: userIsLoggedIn, getJwt: async () => { const response = await fetch("/my-server/halo-token"); return await response.text(); }, } </script></code></pre>When the token is verified, the ticket is logged against the matched user and uses their email address and phone number. Anything entered in the contact details is ignored.Use <code>hideContactDetails</code> to choose whether the contact details are shown, for example by hiding them only for users who are logged in to your site. What happens when the token is missing or can't be verified depends on whether the ticket type requires an identity token:<ul><li>Not required:<ul><li>If the contact details are hidden, the ticket isn't logged. Instead, they are shown so the user can enter their name and email and submit again as an anonymous ticket.</li><li>If the contact details are shown and <code>getJwt</code> returns nothing, the ticket is logged anonymously using the details entered.</li><li>If the contact details are shown and the token can't be verified, the ticket isn't logged and the user is asked to submit again. The next submission is logged anonymously.</li></ul></li><li>Required: the ticket is not logged and an error is shown.</li></ul></body>

Feedback

Guide name here

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

One unified platform. Every team. Every workflow.

Tailored solutions for every industry.

Powerful capabilities, endless possibilities.

Browse Guides

Platform

Use Cases

Resources

Halo

Subscribe to Halo for latest news

Follow