Setting Up Capture

Capture setup, how to setup your own capture

Capture is one of our easiest apps to install and get started with. One simple line of code added to the header of your website or landing page gives you the power to add opt-in forms that show based on a range of rules that you can control.

Capture Overview

Every business collects emails, it's still one of the most powerful communication mediums around. Email gives you a direct one to one communication with your customer. You can use email to send newsletters, product updates, special offers or announcements.

Many businesses still lack the proper ability to collect emails from their customers. They also lack the ability to test new ideas and try different messaging against certain types of customers based on their behaviors.

Gleam capture on website

That's where Capture comes in. We make it incredibly easy to build beautiful opt-in forms that you can setup to appear on your own terms. What's more, these forms sync with most of the major email platforms - which means you don't even have to worry about involving your tech team.

Just install our tracking script and get testing.

Installing Capture On Your Site(s)

We've built Capture to be very easy to install on your site. All that is required is to paste a single line of Javascript into your website's template.

You can grab instructions by clicking the Get Install Code button at the top of the Captures tab.

Gleam interface showing tracking code for capture

Insert Before The Closing Head Tag

If you're unsure exactly where to put the installation script here's some sample code that shows exactly where in your header to insert it.

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <--- Insert Capture Script Here --->
</head>

<body>
Main body content
</body>

</html>

Once this code is installed on your site you can completely control all your Capture campaigns from within the Gleam interface. This means you can test as many ideas as you want without technical help or even having to replace the script.

Embedded Captures

If you're using an Embeddable Capture type then you'll be provided an additional code to embed that Capture into your page.

<div data-capture-embed='s9tgL'></div>

Behavioral Rules are not enabled for Embedded Captures, they will always show wherever the code is added.

Capture Landing Pages

Every Capture you create comes with it's own dedicated Landing Page that you can access via the Preview tab of your Capture.

Gleam interface showing capture landing page

You can direct traffic to your Capture's Landing Page by sharing the link, or via your landing page's QR Code.

Gleam capture landing page

Sending Traffic To Your Capture Via QR Codes

Every Capture comes with a unique QR code that will redirect users to your Capture's Landing Page when they scan it.

You can find your Capture's QR code in the Preview tab of your Capture by clicking the icon next to the Landing Page link.

Capture QR codes provide businesses that operate out of a physical location a fantastic opportunity to drive signups, grow their email list and distribute coupons directly from mobile devices. All you need to do is display or distribute the QR code in your business and encourage users to scan the code to access your Capture where they can sign up, unlock coupons or take further action.

Gleam interface showing capture landing page with QR code

Setting Up Your Default Email Provider Integration

Capture integrates with 30+ Email Marketing providers, making it easy for you to sync data from your forms into your lists or message sequences.

Each Capture can be linked to multiple providers via the Email Integrations tab (more on this later).

So you don't have to set this up every time you create a new Capture it can be helpful to setup a default integration via the Settings > Integrations tab in the sidebar.

Gleam interface with Mailchimp integration enabled

Creating Your First Capture

Simply head over to the Captures tab in your left hand menu and click the green New Capture button at the top right, you'll then be presented with the option to select which Type you want to use.

Gleam interface showing Capture types

Capture Types

Captures are split up into Types, Layouts and Variations to make it easy for you to understand the purpose of a specific Capture type.

Gleam capture on website

In order to understand all the various options we've put together a separate guide that goes into detail about each Capture type.

Explore Our Capture Types

Capture Setup Options

The options you see during setup may change depending on the Capture Type you've chosen, below is a guide to help you understand what each of the configuration options does.

Layout

The Layout tab allows you to:

  • Give the Capture a name
  • Choose your Type
  • Choose your Layout
  • Choose your Variation
Gleam interface showing capture template layout options

Once you choose the Variation you want to use you will then see a few additional options:

Capturing

Email

Use this option if you just want to capture email addresses without the user providing their name.

Gleam interface with subscribe to email action

This would allow you to do things like:

  • Get more users onto your email list
  • Popup a special offer when users visit your site for the first time
  • Popup a coupon code when users are about to leave your site
  • Allow users to register for a Webinar with just their email address
  • Allow users to access whitepapers or other content
  • Personalized popups based on which social network the user arrives from

Name + Email

Use this option is you want to also capture a name + an email address.

Gleam interface with name and email action

We will automatically handle if a user users their first name or full name when we sync it with your email provider.

Clicks

This is a powerful feature that is often overlooked, but if you use Captures for clicks it opens up possibilities for personalization on your site. For example you could use it to:

  • Redirect users to your Competition
  • Alert users that you ship to certain countries
  • Let users know when a product is out of stock
  • Let users know when there's a sale on
  • Let users know you support a certain language
Gleam interface with click to subscribe action

Call to Action

Some Variations have the ability to enable a Call to Action which allows offers a more conversational way for users to either opt-in or decline to opt-in.

Gleam interface with call to action

Two Step Capture

Two Step Captures allow you to have multiple steps, the first offers the ability to ask a question, then the second step facilitates the opt-in. Both steps can have different messaging.

Step 1

Gleam interface with subscribe to email action

Step 2

Gleam interface with enter email action

Coupon Captures

If you're using the Coupon Capture type then you'll see an additional Coupon tab under the Design tab.

  • If you add a single Coupon then it'll allow unlimited claims
  • If you add individual Coupons then the Capture will end once they are all claimed
Gleam interface showing coupon code

Countdown Captures

If you're using the Countdown Capture type then you'll see an additional Countdown tab under the Design tab.

  • This will allow you to configure the timezone and exact time for the Capture to countdown towards
Gleam interface with countdown timer

Design

Once you've chosen your Capture and Layout settings you're ready to start adding your own touches via the Design tab.

Display Mode

Certain Variations have the ability to set the Display Mode:

Sticky: Moves with scroll

This will stick the Capture to the desired position and make it move as the user scrolls up and down the page.

Static: Does not move

This will stick the Capture to the desired position and keep it there, it won't move.

Scroll: Hides with scrolling down

This will stick the Capture to the desired position but will hide as the user scrolls down the page and show as the user scrolls up.

Position

Certain Variations have the ability to set the Position:

  • Top of Page
  • Bottom Of Page
  • Left of Page
  • Right of Page

In some scenarios you can also set a pixel offset so that the Capture doesn't interfere with other plugins like live chat

Capture Width

You can control how wide you want the Capture to display with this setting, this won't affect the responsiveness of the Capture when viewed on mobile devices.

Images + Gradients

Depending on your Capture variation you'll see different options in this section. Some Captures simply allow you to upload an image.

Gleam interface with image and subscribe to email action

If the Capture doesn't feature an image you can sometimes also upload your image as a background.

Gleam interface with image as background and subscribe to email action

You can also change the background colours or even add a gradient to make the Capture work with your branding.

Gleam interface with coloured background and subscribe to email action

Heading / Text / Buttons

Once you set your images (or gradients) you can edit the body of the Capture. The available sections will depend on which Variation you're using.

You can control:

  • Heading
  • Main Text
  • Button Text
  • Form Placeholders
  • CTA Text (i.e. No Thanks)

Good copy that is relevant to users and entices them can mean the difference between good and great conversion rates, so don't be afraid to experiment ๐Ÿ‘จโ€๐Ÿ”ฌ

Removing Sections

If you want to remove the Heading or the Main Text from your Capture just delete the text, the same works with any optional fields or buttons (except the main Subscribe button).

Gleam interface with heading removed and subscribe to email action

Fonts

Fonts are configurable for each section inside the Design tab, you can choose from 500 different supported fonts.

Gleam interface with different font and subscribe to email action

Post Capture

Once a user completes your Capture by either filling out their information or clicking it, you can choose what you'd like to do afterwards:

Do Nothing

This does exactly what it says on the tin, when the Capture is considered completed nothing happens. This is useful for Click based Captures if you want them to keeping showing, not so useful for Email based Captures.

Display Thank You Message

Show a brief thank-you message when the user completes your Capture.

Gleam capture showing thank you message

Message + Facebook Like Button

Show a brief thank-you message and also a Facebook Like button when the user completes your Capture.

Gleam capture showing thank you message and action to like facebook page

Clicks on this Like button get recorded as Events in your reporting tab.

Message + Redirect

Show a brief thank-you message then redirect the user to a specific URL after they complete your Capture.

Open New Tab / Window

Open a specific URL in a new browser tab after the user completes your Capture.

Trigger Campaign

Trigger another active Capture campaign when the current one is completed, this can be good for chaining Captures or messages together.

Post Capture Image

Gleam capture showing thank you message with image

Auto Close

Auto Close allows you to automatically close the Capture after a set time frame once it's completed, you can set this to 0 to close instantly.

By default some of the options above will automatically select this feature.

Javascript Callback

This option fires a specific Javascript Callback to your page once the Capture is completed. This will pass the status of the Capture and also the collected data:

You can use this to perform something specific like:

  • Adding a coupon to the shopping cart
  • Doing something with the users account
  • Awarding the user something
  • Showing specific content
<script>
window.OnCaptureComplete = function(captureName, message, data) {
  console.log("Capture Callback Test captureName:", captureName, "message:", message, "data:", data);
}
</script>

This should then provide you with the following output:

{
  "form_data": {
    "email": "test@gmail.com",
    "name": "John Smith"
  }, 
  "key": "CQjsS",
  "language_code": "en",
  "location": {
    "city_name": "Sydney",
    "country_code": "AU", 
    "country_name": "Australia", 
    "description": "Sydney, NSW, Australia", 
    "region_name": "NSW", 
    "time_zone": "Australia/Sydney"
  }
}

CSS

The CSS Tab offers you control over the entire CSS of any type of Capture, you can use this to make small tweaks or completely change how a Capture looks.\

Gleam interface showing capture CSS tab

There's three states that you can control:

  • Normal: This shows the Capture before it's been completed
  • Sending: This shows the Capture in the sending state
  • Done: This shows the Capture in the completed state

Clicking any element in the Capture will bring up the associated CSS class to edit.

Setting Up Your Rules

Once you've setup your Capture and have it looking exactly how you want you'll need to move onto the next step which determines when the Capture shows to users.

Setting Up Behavioral Rules

Troubleshooting

Help! My Capture Doesn't Show

There's a few things that you can do to troubleshoot your Capture not showing.

Debugging Rules

We have a nifty rule debugging script that's automatically built in once you install Capture. Simply add #rule-debug to the end of any URL on your website.

https://www.yoursite.com#rule-debug

Common issues include:

  • Not having the tracking code installed on your site
  • Not having the Capture enabled
  • You've already triggered the Capture and closed it previously. It's recommended to test in a private (or incognito) window
  • You have conflicting rules, for example a user can't be New and Returning at the same time