Browse Guides

BACK TO TOP
Embedding a Ticket/Form onto your Website
Reading mode
Copy Link
Link Copied!
Print
Feedback
This guide is part of a collection:
<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><p><br></p>
<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><p><strong>In this guide we will cover:</strong></p><p><strong>-Embedding a Ticket on an external website&nbsp;</strong></p><p><br></p><p data-pasted="true"><strong><span style="font-size: 14pt;">Embedding a Ticket on an external website&nbsp;</span></strong></p><p>Head to Configuration &gt; Tickets &gt; Ticket Types, select the Ticket Type you would like to embed. Within the Forms tab you will find the Anonymous Access &amp; Embeddable section, from this section, copy the Embed code and embed this into your Website.&nbsp;</p><p><br></p><p><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"></p><p><span style="font-size: 10pt;"><strong>Fig 1. Ticket Embed Code<br></strong></span></p><p><br></p><p>Next you will need to add the website domain to the &#39;Global CORS whitelist&#39;. For example: &quot;halo.com&quot;.</p><p><br></p><p>Once embedded, the Ticket form will show on your website.</p><p><br></p><p><strong><em>Note: Database Lookups are not supported on embedded Tickets.</em></strong></p><p><br></p><p><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"></p><p data-pasted="true"><span style="font-size: 10pt;"><strong>Fig 2. Embedded Ticket</strong></span></p><p><br></p><p>When a Ticket is created using the embed form, the Ticket will appear in Halo with a source of &quot;web&quot;. This will show against the Ticket if the &quot;Source&quot; field has been added to the Ticket Type.</p><p><br></p><p><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"></p><p data-pasted="true"><span style="font-size: 10pt;"><strong>Fig 3. Ticket with a source of &quot;Web&quot;</strong></span></p><p><br></p><p>The following lines of SQL can be used to establish a Ticket&#39;s source when reporting:</p><p><br></p><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"><span style="color: #0000ff;">Select</span><span style="color: #000000;">&nbsp;faultid,<br>(</span><span style="color: #0000ff;">select</span><span style="color: #000000;">&nbsp;fvalue&nbsp;</span><span style="color: #0000ff;">from</span><span style="color: #000000;">&nbsp;lookup&nbsp;</span><span style="color: #0000ff;">where</span><span style="color: #000000;">&nbsp;fcode</span><span style="color: #778899;">=</span><span style="color: #000000;">frequestsource&nbsp;</span><span style="color: #778899;">and</span><span style="color: #000000;">&nbsp;fid</span><span style="color: #778899;">=</span><span style="color: #098658;">22</span><span style="color: #000000;">)&nbsp;</span><span style="color: #0000ff;">as</span><span style="color: #000000;">&nbsp;[Ticket Source]<br></span><span style="color: #0000ff;">from</span><span style="color: #000000;">&nbsp;faults</span></div>
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.