Onsite Content Structure

If you’re just starting our please first read the Interaction Template Format article

Having input fields in your interaction template have multiple benefits, like collecting email addresses or improving user profiles with more data (collect birthday, pets, children or any other user attribute you have).

Input Forms Solutions

Create email collector popups.

The email collectors can be created in our platform from Campaigns > Content or Interaction. Like any other campaign, there must be at least one campaign variation.

The email collector campaigns help you increase your number of newsletter subscribers. The collector can be set to appear at the exit intent or can be triggered by any other condition available on our platform.

For more details about how to edit the content for interactions click here.

There is a selection of built-in classes that allow you to easily create those templates, and to generate interactivity without too much code.

Collect extra data along with email or phone number

Our interaction campaigns can collect any attribute sent along with the email address. While only email is required, the others will be retrieved from the html and passed along with the submit event.

Here are the details on how to add extra fields to your onsite forms.

Collect User Tags

You’ll find there how to add new attributes when you collect their email address, which need to be previously added to Users > Attributes section

Tags attribute has a bit different usage, as it can keep multiple values at the same time.

Collect birthdate

If you are interested in sending gift cards, birthday vouchers or just greetings, you will need to have the users’ birthdate or collect the info some way or another.

One way of collecting users’ birthdate is through an input using a data collector.

1. Go to Interaction or Content campaigns and choose data collector
2. Filter the gallery for birthdate or birthday
3. Choose one of the templates and personalize it according to your needs.
4. Now you’re ready to collect birthdates on your website

Dynamic Onsite Content

Onsite Variables

To use the values into the campaigns you need to use the following tag in your campaigns.

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)
• **|vars.variable_name|** //change variable_name with the name of your variable

Those tags will be replaced with variable value, at the time of display. Note that during testing, values might be different from what users see!

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

HTML Structure

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.

Class Names inventory

This is a list of class-names used for data collectors. Also make sure you understand the general structure of an interaction.

Class Name	Notes
.vtw-submit	added on the element used to submit form. Can also support currentstate and nextstate attributes
.vtw-attr	added to input elements needed to collect an user attribute
.vta-email, .vta-source	used to detect user attribute that is collected. Format is vta-[attribute_name] – example: email is .vta-email – example: tags is .vta-tags
.vtw-required	Gets added on submit to input elements that are required and have no value
.vtw-invalid	Gets added on submit to input elements that have an invalid value compared to their html type
.vtw-error	Gets displayed when form is invalid (required or invalid input fields)
.vtw-state1, .vtw-state2	State classes that get displayed or hidden based on currentstate and nextstate attributes of .vtw-submit

Forms – Input Elements

An interaction template will turn automatically into a form if you add valid input fields. This is done automatically using our interaction editor or you can do it yourself.

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

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 happen:

• 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;

Adding field validation

Input fields will follow HTML validation and will only submit the data if they pass the validation. Note that field validation is considered only for required fields. If an input field is invalid, but not required, it will be sent as is.

<input type=”url” class=”vtw-attr vta-homepage vtw-required”> will stop submission if an invalid URL is entered

If there are fields that are invalid, upon submit the following thing will happen:

• vtw-invalid class will be added on the element itself (the input) and on the immediate parent html node;

Form input elements

Usually you have all form elements inside a state, in order to validate all of them before showing next state.

The recommended structure of those input fields are is below. As described in another article parent element of an input field is import for vtw-required and vtw-error classes. Using those you can display/hide an error message or style the input field accordingly.

<div>
    <input style="" name="email" class="vtw-attr vta-email" type="text" placeholder="Email address" required="" />
    <label class="vtw-error"style="color: red; ">This field is required.</label>
</div>

Details of input elements:

• input elements of type checkbox and radio must the attribute “name” set (that’s because of html validity)
• validity is checked using html validity state
• please use type “email“, “url“, “date” to validate the right format and display the message.

Hidden Attributes

You can also add fixed hidden inputs to collect extra information or to update users.

For example <input class=”vtw-attr vta-source” type=”hidden” value=”popup” /> will collect input source for the email address.

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.

Content states

Inside vtw-inner class element you can have one or multiples states. Think of a state as a step in a multi-step flow, that a user can be guided through. Or a thank-you message that replaces a form after you submit it.

Clicks on vtw-submit tag can guide user through multiple interactive steps, based on the custom attributes:

<button class=”vtw-submit” currentstate=”vtw-state1″ nextstate=”vtw-state2″>Subscribe</button>

• nextstate -> element with this value will be displayed
• currentstate -> element with this value will be hidden

Add .vtw-state1 class  on the <div> tag wrapping all the form inputs

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

<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

<div class=”vtw-state2”>
    <p>Thank you for subscribing</p>
</div>

Full example:

<div class="vtw-inner">
    <div class="vtw-state1">
        <a href="#" currentstate="vtw-state1" nextstate="vtw-state2" type="button" name="" link-editable="" class="">DOWNLOAD FOR FREE</a> 
    </div>
    <div class="vtw-state2">
    </div>
</div>

Submit button

.vtw-submit

• used to submit all input values with vtw-attr class inside the campaign element (they will be submitted by generating a sitesubmit event)
• this element 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 attributes: currentstate and nextstate . On successful 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. (submitting a form with an input element with this class will generate a login event)

onsubmit attribute. Vtw-submit element also support onsubmit attribute, which is the standard html on submit event listener. It evaluates the content as javascript.

<button class=”vtw-submit” type=”button” currentstate=”vtw-state1” nextstate=”vtw-state2” onsubmit="console.log(1)"></button>

Dynamic Interaction

For example, this way you can collect email addresses or other profiling information and save it to user profile.

When you choose Dynamic Data as Interaction type, the system will automatically do it’s job and personalize the content with dynamic modifiers from:

• user
• unique voucher (coupon codes)
• campaign and template information
• recent user activity

Everything works in a similar fashion to transactional emails (only the event will be missing here). You can use conditional statements or simple tags:

• {% if user.score > 100 %} {% endif %}
• **|user.country|**

Common Issues

Also, we’ve put together a selection of common mistakes when building an interaction template.