Our interaction templates allow for a wide range of customizations inside the editor. In order to be valid, a specific html structure needs to be followed.
The following approach works best with our editor, and can be easily customized for various display-sizes in order to be responsive.
If your interaction includes input elements to collect data please read this article.
Root element
<div class="vtw-campaign interactive1" vt-style="vtblue,vtorange">
...
</div>- vtw-campaign class is required in order to enable editor
- vt-style attribute includes a list of potential classes that an interaction campaign can hold. Those are usually changing colors or design aspects. This is optional and can be used to easily allow changing styles using class-names.
Classes names inventory
In order to make your campaign work well within our visual editor, as well as on your website, we make use of the following internal class names.
| Class Name | Notes |
| .vtw-campaign | Generic class name given to all campaigns embedded into the website. Used for styling and positioning. |
| .vtw-inner | Inside vtw-campaign there will be vtw-inner to store the content. |
| .vtw-close | Elements using this class will work as exit buttons (they will close the campaign) – It will generate a siteclose event. – You can add this class on any elements that you want to close the editor. – If it contains an img tag, it can be customized inside the editor. |
| .vtw-click | Elements having this class will generate a siteclick event – if there is a href attribute it will follow the URL – make sure you do not overlap elements with vtw-click class, as the top one will be considered only. |
| .vtw-bck | Is the element used for the backdrop/overlay. This gets added/removed using the editor. |
| .vtw-submit | Used to navigate through different content states – Also this element is used as submit caller if you are using a data collector |
| [vtw-toggle=”class_name”] | Tag attribute used to toggle a class_name for .vtw-campaign element. Adding this attribute to an element removes or adds the value of it from main .vtw-campaign. |
| .vtbottomleft .vtbottomright .vttopleft .vttopright .vtcenter | Class names added by the editor to position .vtw-campaign. You can use them to change elements/structure depending on position (works only on desktop) |
| [vt-style=”style1_name, style2_name”] | Custom attribute on .vtw-campaign element used to apply class names to the element. – Expects a list of class names separated by comma that will be applied by the visual editor to .vtw-campaign element |
Element .vtw-submit
Inside a state you can have a button with the following attributes that will allow the user to go to the next state:
- currentstate -> element with this value will be hidden
- nextstate -> element with this value will be displayed
<button class="vtw-submit" currentstate="vtw-state1" nextstate="vtw-state2">Subscribe</button>Alternatively you can use any other classes. Only the ones mentioned above are in use by the system.