BOOK A DEMO

How to Capture email address in a Popover & upload to your ESP

The first step in your personalisation journey is to identify as many customers as possible.

By collecting user email address you are able to personalise email channel using on-site behavior whilst also growing your list.

These instructions detail 2 approaches depending on the modules you have with Fresh Relevance.

  1. Using a Fresh Relevance Form – If you have the Triggers module, this is an easy way to collect email addresses and grow your ESP lists, without needing to create and edit code
  2. Embedding your ESP Form – Alternatively, you can create a form in your ESP and add to your own template in Fresh Relevance.

Each have their own pros & caveats – see the About section for each approach below.

EXAMPLE

Demo store popover_c5xjiz15ev

About

Gradient Icons 2021_Business - Winning Ideas1

About

This approach is the easiest to configure, using our pre-made templates and user interface.

It also avoids any built in redirects from your ESP’s forms.

This is only available if you have the Triggered Email module.

Gradient Icons 2021_Popover - Popup

Step 1 – Create Data Capture SmartBlock

  1. On the left nav, click Content | SmartBlocks
  2. Click the Data Capture tab
  3. Click Create SmartBlock
  4. Select the Template you would like to use. You can customise the look and feel once inside the template
Gradient Icons 2021_Settings - Web Settings

Step 2 – Configure your Popover

  1. On the Behavior tab, configure display behavior (e.g. fixed delay vs. exit intent)
  2. On the Behavior tab, set Form Submit Destination to be Custom Signal and name as appropriate in the Custom Signal Name box (eg. NewsletterSubscribe). Keep a note of this for the next step
  3. On the Layout tab, and any others which exist for your selected template, configure the form look and feel
  4. When you’re happy with the popover click Publish

Visit our blog on pop-overs in general for best practice considerations and some great examples.

channels-ads-icon-2

Step 3 – Register Custom Signal

  1. On the left nav, click Triggers
  2. Click Manage Custom Signals
  3. Click the Create Custom Signal button
  4. In the Namespace box, add the Custom Signal Name you added in step 3 and click Register
Gradient Icons 2021_Platform - Audience Analytics

Step 4 – Create ESP channel

You may need to set up a new ESP channel to allow previous unsubscribers to re-join your list.

  1. On the left nav, click Settings | ESP
  2. At the bottom of the page under Set up a new channel, select your ESP in the dropdown, then click Next
  3. Setup your ESP settings as required. You can replicate your default ESP’s settings by opening the ESP settings on the previous page
  4. In the Contact Exists Permission Behavior box, select the appropriate option for your ESP based on. Depending on your ESP requirements, this may be on the 2nd or 3rd page.
Gradient Icons 2021_Triggered Emails - Replenishment

Step 5 – Set List Upload

  1. Go back to Triggers
  2. In the Signal Dropdown select your new signal. It will be formated as ‘Custom – Namespace’ using the Namespace previously entered
  3. Click Add Trigger Program
  4. Click Create
  5. Select Create next to Custom – Set field, Add to list
  6. Edit the program as desired and select the List you wish to add the email addresses to
  7. Click Save
  8. Drag your Trigger Program into the Trigger Tree
Gradient Icons 2021_Platform - Slots - SmartBlocks

Step 6 – Deploy

  1. Go to the Data Capture SmartBlock you created
  2. Click Publish and Use
  3. Create your Slot and Rules as needed
  4. Insert your SmartBlock via the Site Editor or Add the Slot Manually
Gradient Icons 2021_Testing & Optimization - Success

Step 7 – Test & Push Live

Test in the same way you would any other Website SmartBlock.

Ensure that you check:

  • That submitted email addresses are added to your ESP list
  • That dismissing the pop-over works as expected
  • That previously unsubscribed addresses are re-subscribed

Once you’re happy remove any testing criteria to push live.

Using your ESP Form

Gradient Icons 2021_Business - Winning Ideas1 (1)

About

For this approach, your ESP must have form functionality and allow you to access the raw code.

This option also allows you to take advantage of any ESP features, such as dynamic address book uploads.

This option requires some minor code editing, but we’ve got instructions below and this video for you to follow.

Gradient Icons 2021_Triggered Emails - Bulk email

Step 1 – Create form in your ESP

  1. Create the desired form in your ESP
  2. Copy the HTML code this generates between (and including) the form tags (see screenshot)
  3. Inside the first form tag (inside the <  > symbols) add this code. Adding it at the end before > is easiest.

 

onsubmit=”return {{safeid}}_frel_validate_signup(this)”

Gradient Icons 2021_Popover - Popup

Step 2 – Create Data Capture SmartBlock

  1. On the left nav, click Content | SmartBlocks
  2. Click the Data Capture tab
  3. Click Create SmartBlock
  4. Select the Template you would like to use. You can customise the look and feel once inside the template
Gradient Icons 2021_Technical - Custom code

Step 3 – Add your Form to the Layout

  1. On the Layout tab, click Clone Layout
  2. Next, click Edit, which will take you into the template code
  3. Change the Layout Name, we recommend referencing the Form that you’re inserting to find it easily later
  4. Scroll down through the code, or search for <form
  5. Replace the block of code between the form tags that you copied in step 1
  6. Click Save
Gradient Icons 2021_Settings - Web Settings

Step 4 – Configure your Popover

  1. On the Behavior tab, configure display behavior (e.g. fixed delay vs. exit intent)
  2. On the Behavior tab, set Form Submit Destination to be ESP
  3. On the Layout tab, and any others which exist for your selected template, configure the form look and feel

Visit our blog on pop-overs in general for best practice considerations and some great examples.

Gradient Icons 2021_Platform - Slots - SmartBlocks

Step 5 – Deploy

  1. When you’re happy with the popover click Publish and Use
  2. Create your Slot and Rules as needed
  3. Insert your SmartBlock via the Site Editor or Add the Slot Manually
Gradient Icons 2021_Testing & Optimization - Success

Step 6 – Test & Push Live

Test in the same way you would any other Website SmartBlock.

Ensure that you check:

  • That submitted email addresses are added to your ESP list
  • That dismissing the pop-over works as expected
  • That previously unsubscribed addresses are re-subscribed

Once you’re happy remove any testing criteria to push live.