Interaction Template Format

This document describes template formatting for interaction campaigns to be used into our visual editor. 

As a main rule:

Any interaction template could be any html code, including javascript and css. In order to benefit from our system built-in features (open/click/close reports, submit emails and so on) you need to follow a few conditions for your html.

You can use dynamic information to display variables in all your onsite templates. Those are called tags and can be:

Onsite Variables

Read more on creating those variables. Some examples:

  • **|vars.random|**  -> displays a random number between 0 and 100
  • **|vars.cartValue|**  -> value of the cart (if this is set by your system)

User Context information

Information like city, country (if you enabled visitor info under JS integration settings). Please check those before using them in production. Names might differ based on client browser language.

  • **|session.city|**  -> user city
  • **|session.country|**  -> user country
  • **|session.country_code|**  -> user Country Code. Two uppercase letters
  • **|session.state|**  -> user state

EMAIL COLLECTOR TEMPLATE

Tags with the following class should be added for functionalities:

.vtw-bck – for the overlay (there is only css added to it) if you want the collector to be displayed in a overlay (modal)

.vtw-close – for any tag that will close the campaign and generate a siteclose event. Can also be added to vtw-bck if you want modal to be closed

  • vtw-click added on <a> tags will also follow the href of the tag
  • make sure you do not overlap elements with vtw-click class, as the top one will be considered only.

Template support multiple states. For example before and after an email is submitted.

You can have multiple state in a template. Usually display initially the first one (vtw-state1) and hide all other. They will be displayed based on vtw-submit button settings (see below).

.vtw-state1 –  on the <div> tag wrapping all the message and the <input> tags.

This element will be hidden on succes (when submit button is clicked, email is sent to our system) and vtw-state2 will be displayed (according to currentstate and nextstate attributes from submit button)

   eg: <div class=”vtw-state1”>

             <p>some text</p>

             <input class=”vtw-attr vta-email” name=”email” type=”text”></input>

             <button class=”vtw-submit” type=”button” currentstate=”vtw-state1” nextstate=”vtw-state2”>Send</button>

         </div>

.vtw-state2 – on the <div> tag wrapping the section with the confirmation message

    eg: <div class=”vtw-state2”>

              <p>Thank you for subscribing to our newsletter</p>

          </div>  

.vtw-submit

– used to submit all input values with vtw-attr class inside the campaign element

– it can have it’s own vta-attribute_name and value specified on the tag itself:

<button class=”vtw-attr vtw-submit vta-gender” type=”button” value=”male” currentstate=”vtw-state1” nextstate=”vtw-state2”></button>

For example this will send the email with male gender.

– It supports states: currentstate and nextstate . On successfull submit, state tag with the class from currentstate attribute will be hidden and state tag with class from nextstate will be displayed

– vta-email attribute is necessary to send data related to an user(email). Value of the attribute will be validated and sent only for valid emails.

Classes for the media queries

These classes are used to make collector responsive. They are optional and css might vary for each design.

.vtw-form

.vtw-inner

.vtw-description

.vtw-success

Adding multiple attributes to form:

First add vtw-attr class name to the input and then vta-attribute_name class where attribute_name needs to be replaced with actual attribute title.

Example:

vta-email -> will attach value from input to user’s email

vta-gender -> will attach value from input to user’s gender

You can also add fixed hidden inputs like <input class=”vtw-attr vta-source” type=”hidden” value=”popup” /> to specify input source for the email address.

Those attributes needs to previously exist on your account. You can view/edit attributes from Users -> Attributes section. One attribute will keep the last value for an user.

Note there is a special attribute called tags which can store multiple values at the same time. Passing any login event with tags attribute, will add values to existing ones.

Adding required fields

You can have any input as a required field, by adding the required attribute on the html tag.

<input class=”vtw-attr vta-email vtw-required” name=”email” placeholder=”Escribe tu email” required=”” style=”” type=”text”>

If there are required fields without value when clicking the submit button, two things will happpen:

  • Tag with vtw-error class will be displayed (if it exists), so you can use it to display a message about required fields;
  • vtw-required class will be added on the element itself (the input) and on the immediate parent html node;

STATIC HTML

Most basic interaction templates could only contain html.

Those will be appended at the bottom of your body html. You can use classes from existing css found on page.

PRODUCT TEMPLATE

Read more about product interaction template.

Related Articles