Widget Configuration

This link provides the files you need to be able to put this widget on your site. Typically these get copied into a directory on your website so that they can be referenced. Once you can physically connect to the files, you then also need to add some configuration into your website to enable the widget to be displayed and to connect to the right bot. An example of this is as follows :

        <div id="flmntWidgetInit"
            flmnt-startintent="get started"
            flmnt-ebm="true"
            flmnt-endpoint="https://hee.ebm.filament.ai/api/chat/query"
            flmnt-botid="2"
            flmnt-providerid="1"
            flmnt-apikey=""
            flmnt-rootpath="./"
            flmnt-preview="Hi there! I’m the HEE COVID-19 chatbot. Due to the coronavirus pandemic, both recruitment and training have been affected. I’ll do my best to answer any related questions you may have."
            flmnt-widgeturl="./widget.html"
            flmnt-autoscroll="false"
            flmnt-widgetplaceholder="Type your message"
            flmnt-delay="2000"
            flmnt-saveHistory="false"></div>
        

This code above is essentially the configuration. All the flmnt-XYZ parameters here are options that configure the bot. This div element can be on every page, or it can be on a subset of pages. The bot won't load however unless it is combined with the snippet below.

You may use the following properties to configure the bot :

Attribute	Type	Description	Default	Required
flmnt-botid	String	EBM Bot ID	(empty)	Optional
flmnt-providerid	String	EBM Provider ID	(empty)	Optional
flmnt-endpoint	String	Full API endpoint URL	https://api.dialogflow.com/v1/query?v=20150910 or https://demo-ebm.kubernetes.software/api/chat/query	Optional
flmnt-ebm	Boolean	Connect widget to EBM	false	Optional
flmnt-ws	String	WebSockets specification when connecting to a broker	https://demo-broker.filament.ai:4000,1	Optional
flmnt-startintent	String	Intent to trigger on load	(empty)	Optional
flmnt-delay	String	Miliseconds to delay after getting response before showing it to the user.	3500	Optional
flmnt-autoscroll	Boolean	Determines if the widget automatically scrolls to the bottom on a new message, or if the user is given time to read new messages as they arrive.	True	Optional
flmnt-savehistory	Boolean	Determines if the conversation will be saved into local storage and persist across page refreshes	True	Optional
flmnt-widgeterror	String	Default error message.	(empty)	Optional
flmnt-widgetplaceholder	String	Placeholder message inserted into the message input field	(empty)	Optional
flmnt-widgettitle	String	Title to be displayed at the top of the embedded widget	(empty)	Optional
flmnt-avatar	String	URL relating to the avatar image to be used for the bot.	(empty)	Optional
flmnt-widgeturl	String	Full URL of location of widget application files	./_img/hee-chatbot-avatar.png	Optional

Widget Instantiation

In addition to the configuration you will need to include a specific bit of JavaScript in order to instantiate the widget. An example is shown below :

        <script type="text/javascript" id="flmnt-d449e06b-9ab8-45bc-be41-5ee01cb021ae">
        (function() {
            function flmntAsyncLoad(){
                var d = document,
                    h = d.getElementById('flmnt-d449e06b-9ab8-45bc-be41-5ee01cb021ae'),
                    s = d.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = './_js/widget.min.js';
                h.parentNode.insertBefore(s, h);
            }
            if (window.attachEvent) {
                window.attachEvent('onload', flmntAsyncLoad);
            } else {
                window.addEventListener('load', flmntAsyncLoad, false);
            }
        })();
        </script>
        

The code above is then the script that loads the widget and its configuration. Note that in both of these there is a couple of configurations which are dependant on where you uploaded the files. Ie, rootpath, widgeturl, and the line that starts s.src in the javascript. All of these need to be correct in relation to the files. For example, if you uploaded the contents of the zip file into a bot folder, then flmnt-widgeturl will be "./bot/widget.html" and the s.src line would be "./bot/_js/widget.min.js" etc.

Please note that where possible, rather than relative URLs to these properties, please specify absolute paths so that the configuration still works on different pages.