Kits - Creative

You can design any creative imaginable, once you get how to use the Creative builder. To see these tools in action, check out this blog post: How To Re-Create Your Favorite Opt-In or Pop-up.

Creative's are fully responsive, in the sense they shrink proportionally depending on the width of your visitors browser/device width.
You should design multiple Kit's to address drastically different layouts per screen width, or design Kit's to look good when the Container width is ~320 pixels.

  1. Container: The Background, Container, and Positioning of the Creative.
  2. Input Fields: The input fields of your Creative.
  3. Buttons: The buttons of your Creative.
  4. Content: The content blocks fields of your Creative.

# Container:

The container section defines the main element of your Kit (the "Kit Container"), and the background containing that Container. This flexible layout will allow you to position, customize and design any Layout you can imagine.

# Position

  1. Top Left
  2. Top Center
  3. Top Right
  4. Middle Left
  5. Middle Center
  6. Middle Right
  7. Bottom Left
  8. Bottom Center
  9. Bottom Right

# Image

You can place an image as the Container's background image. Be sure to set the Height and Width to match.
* Not required

# Height

The height of the Kit's Container in pixels.
* Required

# Width

The width of the Kit's Container in pixels.
* Required

# X Axis

The X-Axis shift of the Kit's Container in pixels.
* Not required

# Y Axis

The Y-Axis shift of the Kit's Container in pixels.
* Not required

# Background Color

The Container's Background Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Container Color

The Container's Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Container Background CSS

The Container's Background element CSS
* Not required.
* Example: max-height:200px;

# Container CSS

The Container's element CSS
* Not required.
* Example: border-radius:10px;


# Input Fields:

If you want to collect information through a form, you'll need to add Input Fields to your creative.

Click the to add an input field to the Container.

# Input Field X

The X co-ordinate adjustes where the top of your Input Field.

# Input Field Y

The Y co-ordinate adjustes where the left of your Input Field.

# Input Field Height

The height of the Input Field in pixels.
* Minimum of 30 pixels.

# Input Field Width

The width of the Input Field in pixels.
* Minimum of 30 pixels.

# Input Field Type

The width of the Input Field in pixels.

  • Email:

    These types of Input Fields requires an email.
    * Not Required.
    * Multiple Allowed

  • Text:

    These types of Input Fields requires any text.
    * Not Required.
    * Multiple Allowed

# Input Field Placeholder

The placeholder of the Input Field.
* Not required

# Input Field Name

The name of the Input Field.
* Required

# Input Field Font Size

The font-size of the Input Field (in pixels).
* Required

# Input Field Background Color

The Input Fields's Background Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Input Field Color

The Input Fields's Text Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Input CSS

The Input Field elements CSS
* Not required.
* Example: max-height:200px;

# Input CSS

All Input Fields element CSS
* Not required.
* Example: text-align:'center';


# Buttons:

If you want to Trigger a Conversion or a Close Action, then you need to add Buttons to your Creative.

Click the to add a Button to the Container.

# Button X

The X co-ordinate adjustes where the top of your Button.

# Button Y

The Y co-ordinate adjustes where the left of your Button.

# Button Height

The height of the Button in pixels.
* Minimum of 30 pixels.

# Button Width

The width of the Button in pixels.
* Minimum of 30 pixels.

# Button Type

The width of the Button in pixels.

  • Convert:

    These types of buttons trigger the "On Conversion" Action
    * Not Required.
    * Multiple Allowed

  • Close:

    These types of buttons trigger the "On Close" Action
    * Not Required.
    * Multiple Allowed

# Button Text

The text of the Button.
* Not required

# Button Font Size

The font-size of the Button (in pixels).
* Required

# Button Border Radius

The border-radius of the Button (in pixels).
* Required

# Button Background Color

The Buttons's Background Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Button Color

The Buttons's Text Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Button CSS

The Button elements CSS
* Not required.
* Example: max-height:200px;

# All Button's CSS

All Buttons element CSS
* Not required.
* Example: text-align:'center';


# Content:

You can add Content blocks anywhere to your Kit.

Click the to add a Content to the Container.

# Content Background Color

The Contents's Background Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Content Color

The Contents's Text Color
* Required (want to hide? set the transparency to 0. Example: rgba(0,0,0,0)

# Content CSS

The Content elements CSS
* Not required.
* Example: max-height:200px;

# Content X

The X co-ordinate adjustes where the top of your Content.

# Content Y

The Y co-ordinate adjustes where the left of your Content.

# Content Height

The height of the Content in pixels.
* Minimum of 30 pixels.

# Content Width

The width of the Content in pixels.
* Minimum of 30 pixels.

# All Content's CSS

All Contents element CSS
* Not required.
* Example: text-align:'center';


# Content Block Variables

All Content blocks have certain variables or shortcodes you can use. Here is the full list of them and what they do:
* Not required.
* Example: Welcome! This is page visit number: [total_hits]!


Page based stats:

  • [total_hits]
    The # of times they’ve been to your website.
  • [total_pages]
    The # of different pages they’ve seen on your website.
  • [total_impressions]
    The # of times they’ve seen any Kit within your website.
  • [total_closes]
    The # of times they’ve closed any Kit on your website.
  • [total_conversions]
    The # of times they’ve converted with any Kit on your website.
  • [active_hits]
    The # of times they’ve hit the active page.
  • [active_impressions]
    The # of times they’ve seen Kit on the active page.
  • [active_closes]
    The # of times they’ve closed Kit on the active page.
  • [active_conversions]
    The # of times they’ve converted with Kit on the active page.
  • Kit based stats:

  • [kit_hits]
    The # of times they’ve hit any page with the Kit active.
  • [kit_impressions]
    The # of times they’ve seen the active Kit’s on the any page.
  • [kit_closes]
    The # of times they’ve closed the active the active Kit on any page.
  • [kit_conversions]
    The # of times they’ve converted with the active Kit on any page.