Gist Popup Builder Overview

Avatar

By Josh Slone

updated 5 months ago

We’ve completely re-designed the Forms product, to make it easier (and more fun) to create stunning popups that will turn your website into a conversion machine.

With the new update, you can quickly create and launch almost any type of popup form on your website in minutes. And you can do it without coding.

Introducing Gist Forms

Gist has an easy-to-use drag and drop popup builder to create beautiful popups using professionally designed and proven to convert, pre-built popup and optin templates with no developer help needed.


In this overview, we’ll cover each of the major section, the important options, and everything you’ll need to get started.

  1. Builder Tab
    1. Live Preview
    2. Settings Menu
  2. Display Rules Tab
  3. Settings Tab
  4. Share Tab

What’s changed between the latest version and the previous version of the Builder?

Builder Tab

Gist's builder has been created with ease-of-use and customization in mind. The builder has an easy-to-use drag and drop functionality along with a live preview of how the popup would appear on your website.

Under the Builder tab, you will notice the screen is separated into 2 major sections: Live preview on the right and your Settings menu on the left.

Live Preview

Every template includes pre-built sections with placeholder widgets. You can edit, rearrange, delete, and add new content to customize your popups and all changes are instantly updated so that you can see the changes you make in the live preview.

You can point-and-click any widget you’ve added (more on that below) so that you can edit the text on your popups. This includes replacing an image, adding placeholder value for the fields, and more. When you click on the block, the Settings menu on the left will update so that you can make your changes.

Settings menu

On the left hand side of the builder, you will find two menu options in the Settings sidebar.

  • Settings - includes options to customize the main form appearance
  • Elements - shows the layout and design elements for that view. Within this menu, you can add additional Columns or Elements. You can add multiple Columns containers to essentially create “Rows”. Additionally you have Elements such as: Optin Fields, Video Element, Text, Buttons, and more!

Once you click on the section's settings icon in the builder, the builder panel will then show Settings.

Display Rules Tab

"Display Rules" are logic statements in Gist's interface that you create to define granular visitor segments. Gist makes it easy to control where and how your forms appears to visitors with Display Rules. Each page can have different types of form, with different content and exclusive offers.

Adding new rules

To add a display rule, click the "+ Add a Condition" button, choose a condition type, enter any extra values needed for that condition type. That's it!

Display rules reference guide

Gist has a lot of different targeting display rule types.

To see how these various display rule types work, here is a reference guide of each of those, organized by category:

The following Rules are available to customize when and where your popup appears to visitors:

1. Website

Current URL

Current URL Path

2. Geo location

City

Country

3. Visitor behavior

Referrer URL

Visitor’s device

Scroll percentage

Time on page

Time on site

On exit intent

Number of pages viewed

Current day

Current time

Current date

Current month

Visitor’s ad-blocker

Building Complex Logic

With the new Display Rules, you can combine both OR rules as well as AND rules to create complex logic for your use case.

In general, sets of exclusionary rules, like ‘does not contain’, should be added as AND conditions while sets of inclusionary rules, like ‘exactly matches’, should be added as OR conditions.

When evaluating the display rules, every AND condition will need to true while only one condition in each OR condition set will need to be true.

For example

Imagine you're targeting a popup to your home page, that only displays if the visitor was referred from either Facebook or Google.

Your display rules setup would look like this:


The "Current URL Path" condition is added with the AND operator, and the "Referrer URL contains" conditions are added as OR operator.

This limits the popup to only the home page, and only allows it to display if the visitor's referral source is either Google or Facebook.

Settings Tab

Here you can choose what happens after a visitor subscribes to your Form. You can choose to auto confirm or send them a double-optin email or redirect the Subscriber to another page!

The Double Opt-in email, also known as the Confirmation Email, is the email that is sent when someone subscribes to your Form.

You can choose to turn this email off, for a single opt-in process, or you can turn it on, for a double opt-in process. All new Forms start with the Double Optin email set to be sent to everyone.

You can completely customize this email to make it about your download, incentivizing your Subscribers to confirm!

Share Tab

The Share tab contains a lot of helpful information for getting your form live.

When you turn a popup form live, it will automatically start showing to your visitors based on the display rules that you set. 

Paused forms will not show anywhere. Live popups can show on your pages, if the Gist JavaScript tracking code is present, and the Display Rules pass.

But some circumstances call for publishing your pop-up in other ways - such as when you want to add pop-ups to your site as a link, button, or when you want to integrate other ESPs or third party forms to Gist.

Plain Text Link

The Plain Text Link activates your pop-up when visitors click on a link and that causes your pop-up to appear.

Here’s how to add it to your pages…

  1. Open your pop-up's share tab and select the “Plain Text Link” tab.
  2. Enter the text that your link should say.
  3. Click Get Code and copy the entire snippet.
  4. Paste the code on your webpage, exactly where you want the link to appear.

Custom HTML

Custom HTML is an option where the user can either create a form within their ESP or CRM, including extra fields, hidden fields, and other CSS or JavaScript, and they can paste that into our Custom HTML container. This will allow the user to have a highly customized field that fits all of their business requirements.

Additionally, Custom HTML can be utilized to show content other than a form, whether its a button, image, or something else.

Troubleshooting your pop-up

If your pop-up doesn’t show up on your page, you can take the following troubleshooting steps:

  1. Open your page’s source code (using your browser or site editor).
  2. Check to ensure your entire pop-up publishing snippet is within your page’s code.
  3. Confirm that your site’s platform supports JavaScript code. (You may need to consult their documentation.)
  4. If you continue running into problems, try viewing your pop-up in another browser or on another device.
  5. Try clearing your cache - especially if your pop-up appears in some browsers but not others.

Still having trouble? Reach out to our support team, and we’ll be happy to help troubleshoot with you.

Updating your pop-up

You can make any changes as needed even after you publish your pop-up. If you make changes to your pop-up itself, you can simply click Save - your published pop-ups should reflect any changes you’ve made anywhere you've published them.

That’s it! Your Drag & Drop pop-up should be on your page and you can start collecting opt-ins.

Did this answer your question?