Add-ons documentation

Table of contents

Public demo URL

Public Demo builder can be opened with one of these URLs:

To reset user:[Brand ID]/?logout=1

To choose category:[Brand ID]/?tpl=Entertainment
(Use "?tpl=all" parameter for "All templates" category)

To choose template:[Brand ID]/?tpl=Entertainment/Manhattan[Brand ID]/?tpl=Entertainment/Night+Club
(Use category and template names in English only)

To preview template:[Brand ID]/quick_preview/?tpl=Entertainment/Manhattan[Brand ID]/quick_preview/?tpl=Entertainment/Night+Club

Combine several parameters at the same time:[Brand ID]/?tpl=Entertainment/Manhattan&logout=1[Brand ID]/?tpl=Entertainment/Night+Club&logout=1

Open public demo builder with appropriate hosting plan:[Brand ID]/?hosting_plan=abc123
(Use hosting plans from Edit Plans dialog "Relate with these hosting plans" field)

Website import

By default website import is available in builder by hovering New/Reset button and choosing Import option.
Import can also be implemented on your hosting website as a simple form. The form submits import request to your public demo URL in order to show your client how importer works. Here is an example:

<form action="" method="get">
    <input type="text" name="import" />
    <button type="submit">Import</button>

If you want to import exact website you can do it with a simple link:

<a href="">Import</a>

Help scenarios available since version 3.7.157

All enterprise builder scenarios are located in ./scenarios folder. Every scenario is its own folder, where folder name is scenario ID (see "Overriding existing help scenarios").

Complete interactive guide:

Example of implementation on your website:

<iframe src="[Brand ID]/" frameborder="0"></iframe>

Scenarios can be executed using one of these URLs:

To view how template was built:
    [Template ID] is template folder path relative to templates folder (english only);[Brand ID]/?tpl=[Template ID]&logout=1#scenario=./1
Example:[Brand ID]/?tpl=Hotels/Cherry hotel&logout=1#scenario=./1

To view scenario from scenarios folder where:
    [Template ID] is template folder path relative to templates folder (english only);
    [Scenario ID] is scenario name (BookmarksShare, Button, FacebookFans, FacebookLike, Form, Gallery, GoogleMaps, Youtube, Languages, Line, Menu, odnoklassniki, Picture, Shape, TextArea, Twitter, vkontakte_community, vkontakte_like);
    To view "Basic Tutorial" scenario use [Scenario ID] "introduction".[Brand ID]/?tpl=[Template ID]&logout=1#scenario=[Scenario ID]
Example:[Brand ID]/?tpl=Hotels/Cherry hotel&logout=1#scenario=Picture

Overriding existing help scenarios available since version 3.7.157 (enterprise only)

All enterprise builder scenarios are located in ./scenarios folder. Every scenario is its own folder, where folder name is scenario ID. Scenario folder can contain subfolder gallery that should contain all images and audio files used by that scenario. Scenario folder must contain .json file with description of that scenario. JSON file name should be [scenario ID].json. See ""

If you want to override/change existing builder scenario, then instead of editing that scenario create a copy with same name + -ext and edit that. For example if you want to override scenario TextArea then create scenario with name TextArea-ext and it will be used in stead of original.

JSON file structure
  • String - Friendly name of the scenario;
  • String - (optional) Builder site template identifier to load when this scenario starts;
  • String - (optional) Relative URL to background music file that will be looped while scenario is playing;
  • Number - (optional) Height of space in pixels to free up in websites body for this scenario;
  • Array of Object - List of scenario steps that will be performed in order one after another;
  • String - Title of the step that will be shown in tooltip;
  • String - (optional) Text/description of the step that will be shown in tooltip;
  • String - (optional) Placement of tooltip ("left", "right", "top", "bottom"), if not specified placement is chosen automatically;
  • String - (optional) Identifier to map element from subject or objective;
  • String - (optional) Relative URL to audio file that will be played when step starts;
  • String - Subject descriptor that tooltip of this step will be attached to;
  • Array of String - List of objective descriptors, When all objectives completed scenario will advance to next step;
  • Array of String - (optional) List of requirement descriptors. All requirements need to be satisfied for tooltip of this step to be shown;
  • Object - (optional, content depends on objective) Default content descriptor object that will be used when scenario is in autoplay mode;
  • Object - (optional) Bounds descriptor that will enforce bounds of elements from objectives;
  • String - (optional) Event descriptor that needs to be satisfied before bounds are enforced;
  • NumberString - (optional) Position from left (when string, then one of 'left', 'center' or 'right');
  • NumberString - (optional) Position from top (when string, then one of 'top', 'middle' or 'bottom');
  • Number - (optional) Width of element;
  • Number - (optional) Height of element;
  • Number - (optional) Reference width to use when 'left' is a string;
  • Number - (optional) Reference height to use when 'top' is a string;
Available subjects (targets of interaction and tooltip)
... # click to expand
Available objectives (events that need to be triggered to complete objectives)
... # click to expand

Adding custom builder plugins available since version 3.7.81 (enterprise only)

You can add your custom created plugins to your enterprise builder installation by placing them to folder <builder_installation_root>/plugins. You can enable your custom plugins by adding file <builder_installation_root>/plugins/plugins-ext.json. File format is the same as <builder_installation_root>/plugins/plugins.json. Those two files will be merged by adding custom plugins listed in plugins-ext.json file to your builder toolbar after plugins listed in plugins.json file.

Since builder version "3.7.262" it is possible to place plugins to custom groups. When defining plugin group, set new unique ID, name and icon.
For icons you can use bootstrap (ex. "glyphicon glyphicon-cloud") or font awesome (ex. "fa fa-cloud") icons.

{"id": "my-custom-group-id", "icon": "fa fa-bath", "name": "Bucket", "items": [

In case if you want your custom plugin to appear in premium builders you have to register it in our custom plugin repository.

You can find information on plugin development here.

Scripts available since version 3.7.288 (enterprise only)

Scripts can be used in order to insert extra piece of code to clients' websites or into builder itself.
All scripts must be located in your builder installation folder /assets/scripts (create folder if it does not exist).
Make sure that scripts folder is readable by Web server.

Here is the list of available scripts:

  • builder_head_end.html — inserts content before closing </head> tag in builder.
    Available variables: isDemo.
  • site_head_end.html — inserts content before closing </head> tag in all clients' websites.
    Available variables: isDemo, isPreview.
  • site_body_end.html — inserts content before closing </body> tag in all clients' websites.
    Available variables: isDemo, isPreview.

In order to add script create file with script name in builder scripts folder and add your HTML content.

Script variables

You can use variables in scripts. Available variables are specified for each script separately.
Here is the list of available variables:

  • Boolean — True if public demo builder is opened.
  • Boolean — True if client opens previewed website in builder rather than live published website.

The Boolean variable can be used with IF statement in script with the following syntax: {{#var}}..{{/var}}, for example:

    <!-- My code for public demo builder only -->
    <!-- My code for non-public demo builder only -->