Embedded form widgets


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:

  1. Within InTouch navigate to Settings > Form Widgets
  2. 'Edit' the relevant Form Widget
  3. Within the Widget Config section, select Embed Code
  4. Copy the code provided within InTouch
  5. 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.

By default, the widget will load its own style sheet but this can be disabled by setting 'includeCSS' to 'false'. This means you are now free to use your own CSS rules to style the Form in any way without being encumbered by existing CSS rules.

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.

<< Previous      Next >>
Powered by HelpDocs (opens in a new tab)