Alongside the library of default widgets in the Visual Editor, you'll be able to create your own. This requires a knowledge of Javascript and JSON.

Below, we will describe all relevant parts to this process.

Structure of a no-code widget

Overall structure

{
    "friendlyName": '...',
    "description": '...',
    "fields": [
        ... list of form fields
    ],

    js_build: function (widget) {
        // generate and return code to be injected into the variation js            
    }
}

friendlyName

String, required.

Example

"Email capture popup 1"

This is any string that you'd like to name your widget. This name will reflect in what a user sees as a tile heading on this initial screen:

description

String, required, can be a blank string. Used as above, for the visual tile users can click on.

Example

"Our standard email capture popup"

fields

Array, required. Field spec varies from field to field, and so is best described below.

Note: the "name" key that you pass into each of your fields is the same value that will be passed into your js_build function.

Example

[
   "CONTENT",
   { name: "field1", type: "text", ... },
   { name: "field2", type: "textarea", ... },

   "STYLING",
   { name: "field3", type: "color", ... },
   { name: "field4", type: "color", ... },

   "POSITION",
   ... etc

]

Common attributes

id
This is the ID for the field. Beyond allowing for minor customisations and targeting, it does not serve any wider user purpose.
name
This is the same "key" that will be passed into the js_build function. We recommend lowercase letters without spaces, underscores are allowed.
label
This is the friendly name that you'd like to appear above the input field. This is what users of the widget will see.
note
Notes are optional, will appear after your field, and can provide some additional guidance to your users for using that field. You can provide HTML into here, but only aesthetic elements (p, strong, span, etc.).

js_build

JS Function, required. Must return the string you'd like us to inject into the Variation JS.

Example

js_build: function (widget) {
    var uniqueID = Date.now();

var str = `//!-##${widget.widgetType}--START##
// ${JSON.stringify(widget)}

(function(){

var settings = {
    outerbgcol:'${widget.outerbgcol}', // outer background colour
    containerwidth: '${widget.containerwidth}',
    imglink: '${widget.imglink}', // image change
    closepopupcol: '${widget.closepopupcol}', // change x colour
    // ...
};

document.body.insertAdjacentHTML('beforeend', \`
<div id="popup-\${uniqueID}" class="popup">
    <h2>\${settings.headingtext}</h2>
    <p>\${settings.paragraph}</p>
    // ...
</div>
\`);

})();

//!-##${widget.widgetType}--END##`;
    return str;
}

Required markers in the string

Data provided (arguments)

This function consumes an object, in the shape of:

{
   "field1_name": "field1_value",
   "field2_name": "field2_value",
   ...
   "fieldN_name": "fieldN_value",
}

You must process this data how you wish, and output it as a string that we can inject as appropriate.

Field types

Below are a list of all field types you can use when creating your no-code widget. If you would like other types, we are happy to extend our list - just ask.

Field Group / string

Field type	N/A. Just provide a string, similar to "FIELD GROUP 1"
Description	This is used to create a collection of form fields, grouping together anything that proceeds it. To create a subsequent form group, simply provide another string of text lower down in your fields array.
Attributes	N/A
Example	fields: [ "CONTENT", { name: "field1", type: "text", ... }, { name: "field2", type: "textarea", ... }, "STYLING", { name: "field3", type: "color", ... }, { name: "field4", type: "color", ... }, "POSITION", ... etc ]
Screenshot

Text

Field type	"text"
Description	Single-line text field.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: "value" A default value for the box, can be empty. "placeholder" A placeholder for the empty field, which gets removed when a user provides their own input. "maxlength" This allows you to control the maximum number of characters the input field can allow - particularly useful if your widget won't look good with wrapped text. Potential values: Any number
Example	[ ... { type: 'text', id: 'buttonText', name: 'buttonText', label: 'Button Text', value: 'Get Offer' }, ... { type: 'text', id: 'buttonLink', name: 'buttonLink', label: 'Button Link', value: '/somewhere-cool' }, ... ]
Screenshot

Number

Field type	"number"
Description	Numeric input field
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: "value" A default value for the box, can be empty. "placeholder" A placeholder for the empty field, which gets removed when a user provides their own input.
Example	[ ... { type: 'number', id: 'trigger-delay-sec', name: 'trigger-delay-sec', label: 'Delay Time (s)', value: 0 }, ... { type: 'number', id: 'rate-limit-days', name: 'rate-limit-days', label: 'Rate Limit (days)', value: 1 }, ... ]
Screenshot

Date and time

Field type	"date-and-time"
Description	Gives you a datepicker, allowing users to build date-centric experiences like countdown timers.
Attributes	All common attributes, like type, id, name, label and note. No additional attributes.
Example	{ type: 'date-and-time', id: 'endDate', name: 'endDate', label: 'Expiration date' }
Screenshot

Textarea

Field type	"textarea"
Description	A multi-line textarea field. For single-line, see "text".
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: "value" A default value for the box, can be empty. "placeholder" A placeholder for the empty field, which gets removed when a user provides their own input. "maxlength" This allows you to control the maximum number of characters the input field can allow - particularly useful if your widget won't look good with wrapped text. Potential values: Any number
Example	{ type: 'textarea', id: 'contenttoptext', name: 'contenttoptext', label: 'Content', value: 'Be the first to hear about exclusive discounts, upcoming launches and local events.', maxlength: 200, note: `<strong>Note:</strong> Maximum 200 characters.` }
Screenshot

Color

Field type	"color"
Description	A colour picker.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: Value A default value for the colour picker. The user will be able to override this, but this should allow you to retain some control over default styling/theming.
Example	{ type: 'color', id: 'bgcol', name: 'bgcol', label: 'Background Colour', value: '#242424' }
Screenshot	Note: We use the HTML default field, and so the appearence of this may vary between browsers and operating systems.

Checkbox

Field type	"checkbox"
Description	A checkbox with a label.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: Value Optional, default = `false` This can be `true` (checked) or `false` (unchecked) if you'd like to control the default value.
Example	{ type: 'checkbox', id: 'makesticky', name: 'makesticky', label: 'Make sticky and push page down?', value: false }
Screenshot

Radio

Field type	"radio"
Description	A group of connected radio fields, allowing for selection of a single value from a list of options.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: options: array of Options (strings)
Example	{ type: 'radio', id: 'rate-limit', name: 'rate-limit', label: 'How often to show it:', options: [ "Every page load", "Once", "Once per session", "Once per x days:" ] }
Screenshot

Range slider

Field type	"range"
Description	A slider, with min/max and step values that the user will be able to control.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: min number, required The left-most value on the slider. max number, required The right-most value on the slider step number, required The step value for each nudge of the slider. value number, optional The default value
Example	{ type: 'range', id: 'opacity', name: 'opacity', label: 'Opacity', value: 0.25, min: 0, max: 1, step: 0.05 }
Screenshot

On page position - 9 options

Field type	"onpageposition"
Description	Allow the user to select a position, which you can use for any purpose. This is cuts the canvas into 9 sections, with vertically top, centre and middle, and horiztonally left, centre and right. Values provided should consider vertical and then horizontal, e.g. bl = bottom left.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: value string, optional Potential values: `tl` - top left `tc` - top centre `tr` - top right `cl` - centre left `cc` - centre centre `cr` - centre right `bl` - bottom left `bc` - bottom centre `br` - bottom right
Example	{ type: 'onpageposition', id: 'position', name: 'position', label: 'Position', value: 'cc' }
Screenshot

On page position - top or bottom

Field type	"onpagepositiontb"
Description	Unlike the default on page position which allows you to target all 9 sections, this is limited to top or bottom.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: value string, optional Potential values: `top` - top `bot` - bottom
Example	{ type: 'onpagepositiontb', id: 'position', name: 'position', label: 'Example label-position' }
Screenshot

Launch iframe

Field type	"launch-iframe"
Description	Allows you to launch an iframe and embed another application into this one.
Attributes	All common attributes, like type, id, name, label and note. Additional attributes: src The source of the iframe element
Example	{ type: 'launch-iframe', id: 'launch-surveycreator', name: 'launch-surveycreator', label: 'Launch Survey Creator', value: 'launch-surveycreator', src: "https://www.somewhere.com/survey-builder.html" }
Screenshot

Segmentation

Create your own - for vendors

Available methods in the Web Client API (CAPI)

Create a Segment within Visual Editor

Creating a test in the Advanced Editor