<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><strong>In this guide we will cover:</strong></p><p><strong>- What is the Forethought Integration?</strong></p><p><strong>- How to connect the Forethought integration</strong></p><p><strong>-Customising the widget</strong></p><p id="isPasted"><strong>-Embedding the widget to your portal</strong></p><p><strong>-Setting which widget is used in each portal</strong></p><p><strong>- Choose Which Pages of the Portal the Widget Appears On</strong></p><p><strong>-Using Forethought widgets with Chat profiles</strong></p><p><br></p><p><br></p><p><strong><span style="font-size: 14pt;">What is the Forethought Integration?</span></strong></p><p>The Forethought integration allows you to embed Forethought AI Solve widgets into your Halo self service portal, if you are using multiple self-service portals a different widget can be embedded for each of your portals. Overrides for the widget attributes can also be configured in Halo, this allows you to override the properties of the widget when it is being used in your Halo portal. With this functionality your customers can use/access Forethought's solve widget capabilities from within your Self-service portal. </p><p><br></p><p><strong><span style="font-size: 14pt;">How to connect the Forethought integration</span></strong></p><p>To start head to Configuration > Integrations and enable the 'Forethought' integration module.</p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjEwY2EyODc0LThiYTUtNDQ3OS1hYWMxLTgxZTU4MGY2ZWQ1MiJ9.pxSjnLqUSmbmYt3KrYG5ryYd7NbAwTET2rmRDsJ4_xE" class="fr-fic fr-fil fr-dib" width="132" height="140"></p><p><strong><span style="font-size: 10pt;">Fig 1. Enable integration module</span></strong></p><p><br></p><p>Once enabled click into the module. Here you can add each of your Forethought solve widgets, each widget is added/configured individually. Click 'New' in the top right to add a new widget.</p><p> </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjhhYjQ0NDQ4LTgzMjItNGUwNy05ODYyLTk0ZjkyNDQ5ZDU5NiJ9.k8ciJ-Zrxmzo5TEawkSNFz8X8kP-hCxTQyjtsBYlGUg" class="fr-fic fr-fil fr-dib" width="1215" style="width: 1217px; height: 668.52px;" height="669"></p><p><span style="color: rgb(0, 0, 0);"><strong><span style="font-size: 10pt;">Fig 2. Integration setup page</span></strong></span></p><p><br></p><p>In the 'Name' field give the widget a name. In the 'API Token' field you will need to enter an A<span style="color: rgb(0, 0, 0);">PI</span> token for this widget.<span style="color: rgb(0, 0, 0);"> </span></p><p><br></p><p><span style="color: rgb(0, 0, 0);"><strong><span style="font-size: 14pt;">Obtain API token for widget</span></strong></span></p><p><span style="color: rgb(0, 0, 0);">To Obtain the API token for the widget head into Forethought, go to Forethought dashboard > Solve > Widget Configuration tab > Embed. Here in the 'code snippet' you will need to enable 'Show API key in code snippet', once this is visible you can copy and paste this into Halo. </span></p><p><span style="color: rgb(0, 0, 0);"><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjI4YTdjNWI1LWJlNWYtNDUxMS05ZWEyLWNhNGIwNGMzZTQyOSJ9.hZsrP-RPdD0KENejvcKNZCCTBHVruIwMisBHAg1PA1A" class="fr-fic fr-fil fr-dib" width="1043" style="width: 1045px; height: 620.765px;" height="621"></span></p><p><strong><span style="font-size: 10pt;">Fig 3. API key for widget (image taken from Forethought's documentation) </span></strong></p><p><br></p><p>Once you have connected you can configure how this widget appears/functions on your portal.</p><p><br></p><p><strong><span style="font-size: 14pt;">Customising the widget</span></strong></p><p>The widget is customised using the 'Embed Attributes' in the integration setup page in Halo. If no entries are added to the table here the widget will appear as it does in Forethought. </p><p><br></p><p>When adding an entry to the table you will need to choose which attribute you would like to customise/override and what value you would like to override it with. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImY5NjFiMzE1LTg5ZjAtNDU5ZC1iNDk2LTkwYjQxMmIzMGNjZiJ9.OflXtWHic3oPrhK4_nLiv4wwR4iTXbhk8hnGKvvYigE" class="fr-fic fr-fil fr-dib" width="569" height="338"></p><p><strong><span style="font-size: 10pt;">Fig 4. Attribute customisation</span></strong></p><p><br></p><p><strong>Attribute Type/Prefix</strong> - Here, choose the type of attribute you would like to override. </p><ul><li>The attribute type 'system' will allow you to choose an attribute from a pre-configured list, system attributes typically allow you to configure how the widget is oriented on the page. </li><li>The attribute type 'data-ft-' is used for attributes that change the functionality of the widget. </li><li>The attribute type 'config-ft-' is used for attributes that change the appearance of the widget. </li></ul><p><strong>Attribute</strong> - Here, choose which attribute you would like to customise. </p><p><strong>Value </strong>- Here, choose what you would like the value of the attribute to be. This will be the value this attribute has when this widget is used in the Halo portal. </p><p><br></p><p>In the figure 5 example I have added an entry that will result in the header image used for the widget being overridden to another image. This will allow me to to choose the branding I would like to use on the widget. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjllZWEyZTFjLTY4MTgtNDVhOC04ODRkLWZmMDBhOTFhYmE4OSJ9.r6tcWp2Lgli9h6UiUyws9Y0uygrsevp9OYFwkQaecNc" class="fr-fic fr-fil fr-dib" width="519" style="width: 521px; height: 304.976px;" height="305"></p><p><strong><span style="font-size: 10pt;">Fig 5. Entry to override widget header image attribute</span></strong></p><p><br></p><p>For more information on widget attributes and a list of attributes that can be customised, check out Forethought's article here: <a data-fr-linked="true" href="https://support.forethought.ai/hc/en-us/articles/14239088125459-Solve-Widget-UI-Guide-for-Developers#h_01HXJGY8N0WTT6BAC7KJ9G3S66" id="isPasted">https://support.forethought.ai/hc/en-us/articles/14239088125459-Solve-Widget-UI-Guide-for-Developers#h_01HXJGY8N0WTT6BAC7KJ9G3S66</a>.</p><p><br></p><p><strong><span style="font-size: 14pt;">Embedding the widget to your portal</span></strong></p><p>In order to have the widget appear on your self-service portal in Halo you will need to embed this into your Halo self-service portal. </p><p><br></p><p>To obtain the code you will need to embed the widget into your portal check out Forethought's article here: <a data-fr-linked="true" href="https://support.forethought.ai/hc/en-us/articles/1500002917301-Guide-to-Embedding-the-Solve-Widget-on-a-Web-Page" id="isPasted">https://support.forethought.ai/hc/en-us/articles/1500002917301-Guide-to-Embedding-the-Solve-Widget-on-a-Web-Page</a></p><p><br></p><p>If you have multiple Forethought widgets to be embedded into different self-service portals in Halo you will need to embed all widgets into the main portal HTML, then you can set restrictions to determine which widget will appear in each portal. This is because each of your Halo portals will use the same base HTML.</p><p><br></p><p><strong><span style="font-size: 14pt;">Setting which widget is used in each portal</span></strong></p><p>The widget that appears on the portal can be overridden based on the organisation that the portal is using the branding of. </p><p><br></p><p>Head to Configuration > Organisations > select an organisation > Details tab, see 'Forethought Solve Widget Override'. </p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImUzYTBhZWQzLWI5NDQtNGRiZi1hNmQ5LWU3NGViZDliNWQ0NyJ9.WGKAwDmHm-pZtywUGRvC2SEuWoMWMsmziAjSa0vaqAc" class="fr-fic fr-fil fr-dib" width="809" style="width: 811px; height: 626.491px;" height="626"></p><p><strong><span style="font-size: 10pt;">Fig 6. Forethought Solve Widget Override</span></strong></p><p><br></p><p>Here, you can choose the Forethought widget that is used for the portal associated to this organisation. To check which portal is associated to this organisation head to the custom application for the portal under configuration > integrations > Halo API > view applications > select application for second portal. The 'Branding' field here will determine which organisation's branding the portal is using. </p><p><br></p><p><strong><span style="font-size: 14pt;">Choose Which Pages of the Portal the Widget Appears On</span></strong></p><p>You can choose which pages of the portal each widget appears on. Useful when you have widgets that are only applicable to certain sections of the portal, such as a widget that only assists with ticket logging. </p><p><br></p><p>To do this, enter the URLs of the portal pages you would like the widget to show on in the "Allowed URLs" field of the integration setup. </p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6Ijk3MWVkM2EyLWU4ZGItNDk4YS1hMTRhLTQ2MjVlOTZlYTkxOSJ9.bx37vtzN2jPxEhDSh2pw_KSbacMRpBQNZrJFU8H-4wc" class="fr-fic fr-fil fr-dib" width="1353" style="width: 1355px; height: 332.055px;" height="332"></p><p><strong><span style="font-size: 10pt;">Fig 7. Allowed URLs for a Forethought widget</span></strong></p><p><br></p><p>In the figure 7 example the widget will only show on the homepage and the "My Tickets" page of the portal. If this field is blank the widget will show on all pages. </p><p><br></p><p>You can find the URLs you need by navigating to the page in the portal you would like the widget to show on and grabbing the URL. If you have multiple portals, ensure you use the URL for the portal the widget is shown on. </p><p><br></p><p><strong><span style="font-size: 14pt;">Using Forethought widgets with Chat profiles</span></strong></p><p>If you are using Forethought AI solve widgets to handle your customer support you will likely not want the Halo chatbot to appear on your self-service portal. To disable the Halochatbot on the portal head to Configuration > Chat and disable 'Enable Chat for End-Users on the Self-Service Portal'.</p><p><br></p><p><img src="https://halo.haloservicedesk.com/api/attachment/image?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImVlNTY3MThiLTM0MTQtNGM0NC1iNTM1LTQwNmYxNzgzNjQ5NCJ9.GT44--D3u5djATfOxX_yaCEcF6XeQS5Ibny-tQrNG2c" class="fr-fic fr-fil fr-dib" width="968" style="width: 970px; height: 336.314px;" height="336"></p><p><strong><span style="font-size: 10pt;">Fig 8. Setting to enable/disable chat for the self-service portal</span></strong></p><p><br></p><p>If you would like to use your Halo chatbot in conjunction with the Forethought AI solve widget you will just need to ensure the two widgets do not overlap on the portal page. You can adjust the orientation of the Forethought widget (where it appears on the portal page) using the '*system*' attributes. </p><p><br></p><p><br></p>
