Custom widgets

What is a Custom Widget?

A Custom Widget is a group of reusable code snippets powered by ABTasty's functionalities, it may be CSS only, but can include an html template to use in javascript. Custom Widgets allows you to use the editor's forms pieces to allow non technical users to edit the content of the Custom Widget, this way, technical users are able to focus on Custom Widgets creation while non technical user focus on the content of it.

How to create a Custom Widget

You can access the Custom Widgets page there: https://app2.abtasty.com/widget-library On that page you'll be able to create a Custom Widget from blank, but also edit, duplicate or remove an existing one.

You can also access the library of already created Custom Widgets in editor.

How to use?

In editor, you will find 3 tabs in Custom Widget form :

• Form: This is the part on which non technical users will be able to edit a Custom Widget thanks to the js form done in code tab section by technical user.

• Code: As a technical user, you'll put there the snippets needed to make the Custom Widget works, JS, CSS, HTML and JS Form.

• Assets: You'll find here the list of assets linked to that Custom Widget, you'll be able to add some new ones once the Custom Widget has been saved.

As a developer

You'll be able to fill the different code inputs, and variables defined in JS Form as propName are provided into HTML, JS and CSS.

Do not hesitate to consult the complete documentation about how to build a form for your Custom Widget.

In HTML and CSS you can use variables anywhere by using this template: {{variableName}}, the code is parsed to replace the detected variables automatically. In the javascript file, the variables are provided within a DATA object which you can access within your code.

You can find examples of Custom Widgets by default on your account, Download button with background gradient is a simple one, Wheel of fortune is a more complex one with very complete form.

CSS is handled automatically on editor and on production, it is inserted in a dedicated style tag on the head. HTML is provided to your javascript, with variables in it already replaced, it's still HTML as string and not a DOM element in order for you to work with it as you want.

The main Javascript is launched within your campaign right after CSS is inserted to avoid style issues with your HTML once inserted in DOM. You're the master of your script, ABTasty is only launching it in a new function and provides following arguments to it: HTML, DATA, UNIQUE_ID, TEST_ID, HELPERS and $, jQuery (only if your account is set to use jQuery).

Arguments in details:

• HTML: an HTML string that you can use to insert into DOM, parse in a DOM element to edit, manipulate, etc.

• DATA: an object tthat contains all the datas user have set in the form, key is the propName you've defined, and value is either the default or the one set by user if set.

• UNIQUE_ID: a string which as it's named, it's an id to help you create unique keys, id, className, storage, etc.

• TEST_ID: a number to get current test id in your cade and send tracking informations easily.

• HELPERS: the common object provided in every custom script, more informations here.

As a non technical user

You should ensure while providing your request to developer what parameters you want to be able to change in the Custom Widget in order to be able to reuse it across multiple campaigns later. Then once your Custom Widget is ready, test it carefuly, and then you're ready to use it across campaigns by using the Custom Widget in these and editing editable parameters in form tab.

More complete user documentation here.