Interaction Template Format

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 NameNotes
.vtw-campaignGeneric class name given to all campaigns embedded into the website. Used for styling and positioning.
.vtw-innerInside vtw-campaign there will be vtw-inner to store the content.
.vtw-closeElements 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-clickElements 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-bckIs the element used for the backdrop/overlay. This gets added/removed using the editor.
.vtw-submitUsed 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
class names for interaction templates

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.

Related Articles