ClicksChannels Landing Page

Complete Setting Up Your Page

Update Meta Tags

Your page still has the default settings - update your page title, keywords and more.

Setup Meta Tags

Update Social Share Image

You have no social share image. Add an image to be shared on social networks.

Setup Social Image

No Input Element on Page

You cannot collect leads without an input to collect contact details.

Add Email Input

Form Submit Button Missing

Your page has input fields, but no button to submit the form.

Add Submit Button

Form Submit Not Active

Your page has a button with no #submit as button action to submit form.

Setup Button Action

FB Comments URL Not Set Up

Your page has FB comments but the URL is still the default

Countdown Has No Redirect URL

(OPTIONAL) - if no redirect set - it will stay on this page

After making changes to the above settings, make sure to save your page again.

Select font BACK

Sans-Serif

Open Sans

Roboto

Lato

Droid Sans

Fira Sans

Source Pro

Ubuntu

Noto Sans

Oxygen

Oswald

Fjalla One

Poppins

Serif

Slabo 27

Roboto Slab

Adamina

Crete Round

Domine

Droid Serif

Baskerville

Lora

Merriweather

Noto Serif

Playfair

Old Standard

Display

Poiret One

Pompiere

Alfa Slab One

Arima Madurai

Baloo Bhaina

Fredoka One

Lobster

Passion One

Patua One

Ranga

Special Elite

Graduate

Handwriting

Patrick Hand

Patrick Hand SC

Alex Brush

Caveat

Dancing Script

Gloria Hallelujah

Handlee

Just Me Again Down Here

Pangolin

Reenie Beanie

Rock Salt

Into Light Two

Monospace

Cousine

Droid Mono

Inconsolata

Overpass Mono

PT Mono

Roboto Mono

Source Code

Ubuntu Mono

Your session has expired!

On, no! You seem to be logged out. Don't worry, we can fix this!

Just click the button below to open a new window where you can log in.

After you've logged in, come back to this window, and you should be ready to go.

Sign back in.

Survey Awesome

Questions

Triggers

Outcomes

Settings

Manage Questions

Add Question Add Question Group

back - edit question

Delete question

Question:

Sub Title:

Thumbnails:

Layout:

Radio:

Add Answer

* Note: Thumbnail images look best when they are all the same height. If they are different, it may look a bit strange to the viewer...

back - adding new question

Choose a Question Type

Multiple Choice fast & easy responses Create

here would be something

Outcomes

Add Outcome

Default Outcome Action

default

back- edit outcome

Delete Outcome

Outcome Title:

Conditions [ must match all ]

Applies to everyone who doesn't match any other outcome you have set.

Set a condition, or else this outcome wont be triggered...

Add Condition

Actions

Page Action:

Custom redirect:

Loading text:

Sub text:

Settings

Progress Bar

Visibility:

Next Button

You can make any button or image as the next button for your survey. The user will not be able to go to the next question until they click the button.

Simply add a button / image to the page, and give it a url of #survey-next

Style Options

You can make style choices for your survey in the Themes & Advance Tab...

Facebook Pixel & Google Tag Manager

You must paste in the FB Tracking Pixel JS / GTM in the settings/tracking footer code of the page for those to work...

Triggers

Add Trigger

Triggers are actions to take instantly when a user answers a question. Trigger a Facebook Pixel, or a Google Tag with Google Tag Manager.

They don't need to finish the survey for these to be triggered unlike outcomes that fired when the survey is ended.

back - edit trigger

Delete trigger

Trigger Title:

Answer To Trigger

Actions

Facebook Pixel:

Custom Name: no spaces *

This will be a custom FB tracking event called: cfSurvey and the name is a property called 'name'. Watch this video to see how it works...

Google Tag:

GMT Trigger Name:

Enter the name of the GTM trigger that you want to fire. Must be an exact match to what you have in GTM. Watch this video to see how it works...

Editor Apps

BETA: New features to the editor will be added as "apps" that can be toggled on or off.

Save Rows & Sections

Choose or create Row and Section Templates.

Element Themes

Speed up design with pre-made Element Themes.

Mobile Preview

Preview your page with the Mobile Preview mode.

Google Fonts

Choose from over 600+ fonts using Google Fonts.

Search Photos

Search for Photos withPixabay or Unsplash search.

Font Awesome

Pick from 300+ icons with FontAwesome.

Global Editor Settings

Editor Theme:

A (add) Hover elements & press A to Add

E (edit) Hover elements & press E to Edit

D (duplicate) Hover elements & press D to Duplicate

General Settings

Meta Tags / Social Settings

SEO Meta Data

Title

Description

Keywords

Author

Favicon Image

Social Image

SEO Preview

...

http://yourwebsite.com/would-be-here

...

http://yourwebsite.com/ | Your Name

General Settings

Redirect Override - by-pass next page in funnel

On Submit Go To

Page Tracking Code

Digital Asset

Affiliate Badge

Digital Assets / Downloads

Background

BG Image

Image Position

Color

BG Color

YouTube Video

BG Video

Typography

Settings

Themes

Content Font Select a Font

Headline Font Select a Font

Color

Text Color

Link Color

Great for ad tracking, email tracking, etc...

Field Name (1):

Field Name (2):

Field Name (3):

Field Name (4):

Field Name (5):

auto fill in URL query string ie: ?field-name=ad2

Submit Action:

Show In Search Engine

Search Engines

Save Page As Template

Save As Personal Template

Save Page as Template

All Sections

rows

! BETA - Will Be Made Better !

1 column

2 columns

3 columns

4 columns

5 columns

6 columns

left sidebar

right sidebar

Coming Soon

Row Templates

full width

wide

medium

small

Settings

Advanced

Top Margin

BG Image

Image Position:

Trigger On Exit:

Section Width

Modal Width

Sticky

Colors

BG Color

Text Color

Size & Position

Width %

Align

Padding

Top

Bottom

Left / Right

Corner Radius

Edges

Border

Style

Size

Color

Extra

Drop Shadow

Advanced CSS

Side Margin

side margins will supersede width %

Advanced CSS Options

These are advanced settings and should only be used by those who understand the proper use of CSS. Please note that proper use of these settings cannot be supported by our support team.

Section Name:

Section ID:

Timed Delay

Minutes

Seconds

Animation

Type

Style

Delay (ms)

ALL

All Elements

order elements drag over

credit card

apple / android pay

order select

order bump

order summary

2 Step Order

order select w/ inventory

2 Step Order w/ Inventory

text drag over

headline

sub-headline

paragraph

bullet list

media drag over

image

image popup

video

video popup

audio player

form drag over

button

Facebook Optin

input

select box

text area

checkbox headline

Advanced Form

sms sign up

billing add.

shipping add.

survey

countdown drag over

countdown 2.0

minute timer

day timer

Content Blocks drag over

icon

img feature

navigation

faq

divider

progress bar

image list

pricing table

Misc Elements drag over

social share

Privacy Notice

fb comments

text block

custom JS/HTMl

Main CTA Video

Settings

Themes

Advanced

Styles

Animation

Show Only On:

All Devices Desktop Only Mobile Only

Element ID:

Top Margin

ALL

Padding

Padding Sides

Animation

Email Integration Settings

Auto Responder Integration

Here you will be able to hook up your integrations with your auto-responder service...

Integration

Action

List To Add

Refresh list from API

Email Integration Settings

This Is A Test App!

here is what a sidebar could look like...

Title Of Input:

Title Of Text Area:

Title Of Select:

Go App, Go!

The Editor Does Not Support IE, Sorry!

you must use a browser like Chrome, Firefox, or Safari...

<textarea id="tracking-body-top" style="display: none !important"></textarea>
<input id="submit-form-action" value="redirect-url" data-url="#" data-ar-service="" data-ar-list="" data-webhook="" type="hidden">
<div class="nodoHiddenFormFields hide">
<input id="elHidden1" class="elInputHidden elInput" name="ad" type="hidden">
<input id="elHidden2" class="elInputHidden elInput" name="tag" type="hidden">
<input id="elHidden3" class="elInputHidden elInput" name="" type="hidden">
<input id="elHidden4" class="elInputHidden elInput" name="" type="hidden">
<input id="elHidden5" class="elInputHidden elInput" name="" type="hidden">
</div>
<div class="nodoCustomHTML hide"></div>
<div class="modalBackdropWrapper" style="display: none; background-color: rgba(0, 0, 0, 0.4); height: 100%;"></div>
<div class="container containerModal midContainer noTopMargin padding40-top padding40-bottom padding40H noBorder borderSolid border3px cornersAll radius10 shadow0 bgNoRepeat emptySection modalMoveOver" id="modalPopup" data-title="Modal" data-block-color="0074C7" style="display: none; margin-top: 100px; padding-top: 40px; padding-bottom: 40px; outline: none; background-color: rgb(255, 255, 255);" data-trigger="none" data-animate="top" data-delay="0">
<div class="containerInner ui-sortable"></div>
<div class="closeLPModal"><img src="/images/closemodal.png" alt=""></div>
</div><div class="dropZoneForSections ui-droppable" style="display: none;"><div class="dropIconr"><i class="fa fa-plus"></i></div></div><div class="container fullContainer noTopMargin padding20-top padding20-bottom padding40H noBorder borderSolid border3px cornersAll radius0 shadow0 bgNoRepeat" id="container-69005" data-title="Section" data-block-color="0074C7" style="padding-top: 20px; padding-bottom: 20px; outline: none;" data-trigger="none" data-animate="fade" data-delay="500">
		<div class="containerInner ui-sortable">
		<div class="row bgCover noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" id="row--44831" data-trigger="none" data-animate="fade" data-delay="500" data-title="1 column row" style="padding-top: 20px; padding-bottom: 20px; margin: 0px; outline: none;">
		  <div id="col-full-180" class="col-md-12 innerContent col_left" data-col="full" data-trigger="none" data-animate="fade" data-delay="500" data-title="1st column" style="outline: none;">
		  	<div class="col-inner bgCover  noBorder borderSolid border3px cornersAll radius0 shadow0 P0-top P0-bottom P0H noTopMargin" style="padding: 0 10px">
  <div class="de elHeadlineWrapper de-editable" id="tmp_headline1-97281" data-de-type="headline" data-de-editing="false" data-title="headline" data-ce="true" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 0px; outline: none; cursor: pointer;">
    <h1 class="ne elHeadline hsSize3 lh4 elMargin0 elBGStyle0 hsTextShadow0" style="text-align: center;font-size: 32px" data-bold="inherit" data-gramm="false" contenteditable="false">
      <b>Large Call to Action Headline</b>
    </h1>
</div>
</div>
		  </div>
</div>
</div>
</div><div class="dropZoneForSections ui-droppable" style="display: none;"><div class="dropIconr"><i class="fa fa-plus"></i></div></div>
<style id="button_style_tmp_button-93582">#tmp_button-93582 .elButtonFlat:hover{ background-color: #d46d13 !important;} 
#tmp_button-93582 .elButtonBottomBorder:hover{ background-color: #d46d13 !important;}
#tmp_button-93582 .elButtonSubtle:hover{ background-color: #d46d13 !important;}
#tmp_button-93582 .elButtonGradient{                        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(235, 129, 37)), color-stop(1, #d46d13));                         background-image: -o-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -moz-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -webkit-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -ms-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: linear-gradient(to bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                     }
#tmp_button-93582 .elButtonGradient:hover{                        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(1, rgb(235, 129, 37)), color-stop(0, #d46d13));                         background-image: -o-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -moz-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -webkit-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -ms-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: linear-gradient(to bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                     }
#tmp_button-93582 .elButtonBorder{                        border: 3px solid rgb(235, 129, 37) !important;                         color: rgb(235, 129, 37) !important;                     }
#tmp_button-93582 .elButtonBorder:hover{                        background-color:rgb(235, 129, 37) !important;                        color: #FFF !important;                     }
</style>
<style id="button_style_tmp_button-93582-180">#tmp_button-93582-180 .elButtonFlat:hover{ background-color: #d46d13 !important;} 
#tmp_button-93582-180 .elButtonBottomBorder:hover{ background-color: #d46d13 !important;}
#tmp_button-93582-180 .elButtonSubtle:hover{ background-color: #d46d13 !important;}
#tmp_button-93582-180 .elButtonGradient{                        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(235, 129, 37)), color-stop(1, #d46d13));                         background-image: -o-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -moz-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -webkit-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: -ms-linear-gradient(bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                         background-image: linear-gradient(to bottom, rgb(235, 129, 37) 0%, #d46d13 100%);                     }
#tmp_button-93582-180 .elButtonGradient:hover{                        background-image: -webkit-gradient( linear, left top, left bottom, color-stop(1, rgb(235, 129, 37)), color-stop(0, #d46d13));                         background-image: -o-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -moz-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -webkit-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: -ms-linear-gradient(bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                         background-image: linear-gradient(to bottom, rgb(235, 129, 37) 100%, #d46d13 0%);                     }
#tmp_button-93582-180 .elButtonBorder{                        border: 3px solid rgb(235, 129, 37) !important;                         color: rgb(235, 129, 37) !important;                     }
#tmp_button-93582-180 .elButtonBorder:hover{                        background-color:rgb(235, 129, 37) !important;                        color: #FFF !important;                     }
</style>

Successfully Saved Changes

Save as Template

Name:

BETA: Your experience may change as personal templates continue to be integrated into the editor.

Mobile View

On, no! You seem to be logged out. Don't worry, we can fix this!

Once you've logged back in, click the button below to continue.

Just a sec while we recover your session

Session recovered!

Session recovery failed.

Choose a Question Type

Outcomes

Settings

Triggers

...

Coming Soon: Personal & Pre-Design rows for memberships...

Coming Soon: Personal & Pre-Design sections for memberships...

Saved as Personal Template

Page type: order

Theme Options Limited

This Is A Test App!

The Editor Does Not Support IE, Sorry!

you must use a browser like Chrome, Firefox, or Safari...

Successfully Saved Changes

Uploaded Images

Browse your images by tags.

Gradient / Simple Color

Texture & Patterns (repeat)

Search for Icons

No icons found...

Search for High Resolution Photos

No photos found...

Search for Photos, Illustrations and Vector Graphics

No photos found...

Save as Template

Name:

BETA: Your experience may change as personal templates continue to be integrated into the editor.

Mobile View

On, no! You seem to be logged out. Don't worry, we can fix this!

Once you've logged back in, click the button below to continue.

Just a sec while we recover your session

Session recovered!

Session recovery failed.

Choose a Question Type

Outcomes

Settings

Triggers

Editor Apps

BETA: New features to the editor will be added as "apps" that can be toggled on or off.

Coming soon

Global Editor Settings

...

Coming Soon: Personal & Pre-Design rows for memberships...

Coming Soon: Personal & Pre-Design sections for memberships...

Saved as Personal Template

Page type: order

Theme Options Limited

This Is A Test App!

The Editor Does Not Support IE, Sorry!

you must use a browser like Chrome, Firefox, or Safari...