How to Setup a Web Form (Lightbox Pop Up, Embedded Form, Sidebar) that integrates with Iterable

  • Created:
  • / Author: Mike Kurz

You can use a Digioh web form to capture your users’ emails and send them to Iterable.

Digioh offers many ways to serve users a web form:

  • Lightbox Pop Up (forms that open up at the middle of the screen)
  • Sidebars (forms that float in from the side of the screen – can float in from any side)
  • Inline (forms that can be embedded on your site, like in the footer or on a specific page)
  • Banners (forms that take over the top or bottom of the screen)

Any of our web forms can be integrated with Iterable in different ways:

  • Subscribe to an Iterable Static List
  • Add/Update an Iterable Profile
  • Subscribe to an Iterable Message Type
  • Subscribe to an Iterable Channel
  • Trigger an Iterable Tracking event

With the above integrations, you can use any combination of them on a Digioh box. For example, submitting one form can add / update a profile, subscribe the user to a list, and fire off a tracking event simultaneous.

Creating a Digioh Box that integrates with Iterable

Creating the Box

If you’re logging into your account for the first time, or if you haven’t created a widget in your account yet, you’ll immediately be dropped into our Create a New Box wizard. You can also get to that page later by using the “Create New Box” button.

In this case, we’re going to set up an email capture lightbox, so choose that option:

On the next page, choose “Lightbox”; this will set up the form as an overlay pop-up on your site:

On the next page you’ll see a list of themes – pick the one that most closely matches the design you want to create. Digioh offers over five hundred templates, so there’s sure to be something to suit your needs. Each theme is drag and drop, it supports custom fonts, HEX colors (for every element – text, buttons, and more), background images, custom HTML and custom CSS.

Next, give it a name and a description. This is a friendly name for you to easily locate the box in your account. The description is also for you and if you want to use our AI Tools (our AI Headline generator will use the description to find the perfect messaging for you, if you’d like)

Next, you’ll want to make changes you’d like to the template you selected. Check out our Design Training Video, to understand the ins and outs of the Design Editor. The Design Editor is Drag and Drop and every element can be modified as needed. You can easily make any updates need at anytime, and then hit “Publish” to push them live.

Conditioning the Box

Once your design is ready, it’s time to add some conditions to the lightbox to determine when, where, and for whom it will appear. Head to the Conditions menu under the Box Settings and click “Edit Conditions”.

Digioh offers a wide array of conditions you can use on your boxes. Watch our training video that goes over all our logic rules. Below are a few examples of setups you might want to use for email capture lightboxes.

A Welcome Pop Up

Here’s a set of rules you might want to use for a “welcome” lightbox – this box is set to appear once per session until the user has submitted the box’s form, as long as none of the pages they’ve visited while on site have contained the value “utm_source=email” in the URL:

  • Display Until The Box Form is Submitted – This means that the box will stop displaying for anyone that has already submitted the box’s form. This is a good rule to use on most boxes because you don’t want to show a pop up to anyone that has already filled it out and submitted their email
  • Max Displays Per Session Equals 1 – This means the box will only show up once per browser session. This prevents an overly-aggressively pop up, so if the user has already seen the box and closed it, it won’t appear again during that browser session
  • Pages Navigated URL Does NOT contain utm_source=email – This means the box won’t display for anyone that has previously browsed a page on your site with a URL that contained “utm_source=email”. With this rule, it helps ensure that if anyone has clicked through to your site from an Iterable email, the box won’t appear for them because Iterable automatically appends “utm_source=email” to links in an email

Iterable-Based Targeting

If you’re using our Iterable TPAU app, you might want to use the following setup instead.

Using our DIGIOH_API.itrbl.known JavaScript variable, you can specifically target users that aren’t already “known” in your Iterable project:

Integrating with Iterable

Now, that we have our box created and its condition logic set up, we can create the integration to send the user’s email address to Iterable in real-time as they submit the box form.

Digioh offers several powerful ways to integrate with Iterable to allow you to easily configure forms to collect and pass data to your project. You can use one of our Iterable pipelines assigned to a Digioh form to do one (or more!) of the following:

  • Subscribe the user to an Iterable Static List
  • Add/Update a user’s Iterable Profile
  • Update the user’s Iterable Subscriptions
  • Trigger a custom Iterable Tracking event

Getting your Iterable API Key

Before creating a Digioh pipeline to integrate with Iterable, you’ll first need a server-side API Key from the Iterable project that you’re connecting to. If you don’t already have an API key, you can follow these steps to create one:

  1. Login to your Iterable account
  2. Select “Integrations” then “API Keys”
  3. Select “+ New API Key”
  4. Name your API Key and select Type: Server-Side, and then Create the API key
  5. Copy the API key shown and store it securely if needed, you’ll need this to integrate Digioh with Iterable. Please note: The API key is only ever shown once, so a new key will need to be created if this one is lost

Creating the Integration

To integrate the Digioh box you’ve created with Iterable, you’ll use a Digioh pipeline to send the submission data to the configured Iterable project.

Log into your Digioh account and select “Integrations” and then “New Integration”:

Select Iterable from the Integration dropdown menu:

Once you do, you will be re-directed to see all of our available Iterable pipeline templates:

Creating an Iterable Connection

Before creating a pipeline, you’ll first want to add an Iterable Connection. This connection is what a pipeline uses to access the Iterable API key to then send submission data to the designated project. One connection can be used by multiple pipelines. If you have both sandbox and production projects in Iterable, we recommend adding a connection for both. Then you can test your pipelines in your sandbox environment before setting them live.

To add a new connection, select “Add New Connection”

Enter in a name for the connection (e.g. “Iterable Sandbox Connection”) and paste in the Server-Side API key from Iterable.

Now that you’ve got a connection, you’re ready to create a pipeline to send data to Iterable!

Creating a new Pipeline

To create a new pipeline, select “Create Pipeline” under the appropriate template. For this example, we’ll use “Iterable Subscribe to List” template. This type of pipeline is perfect for when you have a Static List in Iterable that you want to add users to. For example, you may have a monthly newsletter list that you want to add new users to when they first visit your site.

When creating this pipeline, you’ll first need to provide a name, select which connection should be used, and select which Iterable List you’ll be subscribing users to.  You can also select the box that the pipeline should be used with.

Once created, the pipeline will then appear under your Iterable Pipelines:

And that’s it – You’ve now created a pipeline to integrate with Digioh! If you need to add the pipeline to a box, you can do that by selecting “Add” under the Integration column in the Digioh Box List:

And selecting your newly created pipeline in the dropdown:

Additional Resources

Please let us know if you have any questions or run into any issues while creating your integration with Iterable. You can always email us via support@digioh.com and our Support Team will be happy to answer any questions you have and assist you with getting everything setup!