Embed an InTouch Legacy Form in your website
Form widgets are a JavaScript plugin that can be used on any web page, or application that supports JavaScript.
Simplest Usage
To embed a Form Widget to your website:
- Within InTouch navigate to Settings > Forms
- Ensure you are in the Legacy Forms tab
- Select Edit next to the relevant Form
- Within the Widget Config section, select Embed Code
- Copy the code provided within InTouch
- Paste the code into your website's HTML code
Your code snippet will look similar to this:
<script id="myFormWidgetID">
(function(id) {
var dc=document.createElement('script'),r=encodeURIComponent(window.location.href),b='baseUrl';
dc.type='text/javascript';dc.async=true;dc.setAttribute('data-wid', id);dc.setAttribute('data-b',b);
dc.src= b+'/formwidget.js?r='+r;var s=document.getElementById(id);s.parentNode.insertBefore(dc, s);
})("myFormWidgetID");
</script>
myFormWidgetID and baseUrl will be unique to your form.Custom Styling
Within InTouch there are basic styling configurations for each form widget. To configure these navigate to the Style & Appearance section within the Form Widget.
Here you're able to amend the forms:
- Background Colour
- Foreground Colour
- Banner URL
Configuration Options
A global variable can be defined called 'intouchFormConfig', as below;
var intouchFormConfig = {
includeCss: true, //set false to stop the default stylesheet from being loaded
foregroundColour: null, //set to a css colour - e.g. #fff- to override what is configured on the server
matterGuid: null, //Id of a matter. If this is set the matter will be updated with the results of this form
bannerUrl: null, //an image to display at the top of the form
autoActivate: true,//by default the widget will automatically activate,
data: { //by default this is null, and the following is example data. Any custom fields can be passed to InTouch.
"my.custom.field": "value",
"aquisition.source": "direct",
"aquisition.campaign": "Newsletter"
},
events: {
activated: () => {}, //an optional callback triggered once the widget is activated
formCompleted: (response) => {}, //an optional callback triggered once a form inside the widget has been completed by the user
},
};
This will need to be defined before the JS code snippet, for these options to applied.
Advanced Usage
You don't have to use the code snippet to load an InTouch form widget on your website. You can include the JavaScript file in your page
<script src="{{baseUrl}}/formwidget.js""></script>Then load the widget manually like the below. Most properties are optional.
window.itfw({
baseUrl: baseUrl,//required - the server URL of InTouch (e.g. "https://go.intouchapp.co.uk")
id: myFormWidgetID, //required - the ID of your InTouch widget
containerElementId: "widgetContainer",//required - ID of a HTML element in the DOM
autoActivate: false,//required - The widget cannot auto activate itself in this scenario
includeCss: true, //set false to stop the default stylesheet from being loaded
foregroundColour: null, //set to a css colour - e.g. #fff- to override what is configured on the server
matterGuid: null, //Id of a matter. If this is set the matter will be updated with the results of this form
bannerUrl: null, //an image to display at the top of the form
data: { //by default this is null, and the following is example data. Any custom fields can be passed to InTouch.
"my.custom.field": "value",
"aquisition.source": "direct",
"aquisition.campaign": "Newsletter"
},
events: {
activated: () => {}, //an optional callback triggered once the widget is activated
formCompleted: (response) => {}, //an optional callback triggered once a form inside the widget has been completed by the user
}
});
window.itfw.activate();Import Notes - Knockout JS
Under the covers, the widget uses Knockout JS to perform data binding to HTML elements. If 'window.ko' is not available on the page, the widget will add it. If it is available, it will use the available version.
If you are using Knockout Templates already, you will have to supply your own HTML templates in-order for this widget to work. Please contact us for a copy of these templates.
