Skip to main content
All CollectionsIntegrationsIntegration Guides
Using Sumo List Builder Email Popup with SmartrMail
Using Sumo List Builder Email Popup with SmartrMail

Want to integrate the SumoMe List Builder Email Pop up with SmartrMail for your site? Then follow our step by step guide here.

P
Written by Peter Connolly
Updated over a week ago

1. Install Sumo List Builder on your Site

Follow the install instructions on Sumo List Builder to add it to your site. You don't need to turn on the pop up yet.

2. Create a New List in SmartrMail

Next, log in to SmartrMail and create a list for the new email subscribers that the pop up is going to collect.

3. In SmartrMail Customize Sign up Form

Click into your new list and click the Get embed form button. Here is where you can set up which fields you would like to collect on your pop up. 

Pro tip: The fewer fields you make people fill out, the more sign-ups you will get (there's a direct correlation). If at all possible, just make it email address only.

4. Enter Sumo's Pop-up composer

Click on "Create your First form in Justuno

5. Paste the HTML Snippet into List Builder

In SmartrMail copy the HTML snippet. Then go Sumo List Builder, and under 1. My Goal -> Collect Info with Custom code, paste the HTML into Custom Form.

You might want to apply some CSS styling to it.

Otherwise, you can go ahead and use the fancy styling of Bluethumb's pop up:

<div class="subscribe_forms-preview" id="wrapper" style="background: url('http://i68.tinypic.com/jignki.jpg'); background-size: cover;border-radius: 5px;margin:  -16px; ">
  <header></header>
  <div id="content">
    <div class="wrap" style="background-color: rgba(0, 0, 0, .4);border-radius: 5px;padding: 20px !important;;box-shadow: 0 0 200px rgba(0, 0, 0, 0.6) inset;color:  white; ">
      <div class="subscribe subscribe-form" style="padding-bottom: 20px;">
        <h2 style="font-size:33px; font-style:bold;/* line-height:1.2 */margin-top:  0;color: white;"> Kick-Start Your Collection!</h2>
        <p></p><div style=""><p style="margin-bottom: 40px; margin-top: 30px;">We're giving away a $400 art voucher to help you start your collection. Subscribe to enter. Quick, competition ends 30th September. </p>
 </div><p></p>
        <form accept-charset="UTF-8" action="https://go.smartrmail.com/subscribe/4qsxz8" method="post">
          <div class="input string " style="margin-bottom: 5px;">
            <input class="form-control" id="email" name="subscribe_form[email]" type="text" placeholder="Enter your email here..." style="width: 100%;">
          </div>
          <div class="submit-form">
            <input class="btn btn-block btn-primary" name="commit" type="submit" value="Enter" style="/* background-color: #089FD6 !important; */ /* border-color: #089FD6 !important; *//* color:white; */ /* border: none; */ /* font-size: 1.1em; *//* font-weight:normal; */ /* padding: 8px 20px; */">
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Download the code as a txt file and copy and paste it into List Builder. You'll need to make 3 changes to it for your Pop up to the above code. They are:

6. Turn on the Pop-up

The last step is to go the Sumo and turn on your pop up. Now kick back, relax, and watch your email sign-ups roll in.

Did this answer your question?