How to add the Newsletter widget

Last updated 12/21/2022

Before adding the Newsletter widget make sure you have added the initialization script tag.

Add the Bread & Butter Newsletter widget to any page on your site. The Newsletter dialog will pop up after a specified number of seconds, prompting to user to authenticate with the provider of their choice to sign up for your newsletter.

Bread & Butter remembers who has signed up, and won’t prompt them again.

This guide explains how to add the Newsletter widget to any page on your site, and how to configure the content you want it to display, including background image.

Step 1

Find the initialization script you have added to your webpage (see initialization script if you have not added it already)

Step 2

In the initialization script, find the line:

BreadButter.configure({app_id: "[APP_ID]"});

Step 3

Add the following line under BreadButter.configure();

BreadButter.ui.addNewsletterWidget({
    custom_event_code: 'CUSTOM_EVENT_NAME',
    delay_seconds: DELAY_TIME_SECONDS,
    header_text: 'HEADER_TEXT',
    main_text: 'BODY_TEXT',
    success_text: 'SUCCESS_TEXT',
    image_source: 'IMAGE_URL'
    });

Step 4

Replace CUSTOM_EVENT_NAME with the user event code that you want to trigger when a user signs up. Don't have an user event or Integration and Rule set up yet? Check out Integration Setup.

Step 5

Replace DELAY_TIME_SECONDS with the amount of time after page load that the Newsletter widget appears. Important: don't include ' ' around the time value.
Replace HEADER_TEXT with the header text you want. This will appear at the top of the dialog.
Replace BODY_TEXT with the main body of text that appears for logged out users.
Replace SUCCESS_TEXT with the text that appears after a user successfully authenticates and signs up for the Newsletter.

Step 6

IMAGE_URL is optional. If you want to use the default image as seen in the example at the top of the page, simply remove this line.

If you want to add your own custom image, replace IMAGE_URL with the source URL of the image you want to use.

Step 7

You should now see the Bread & Butter IO Newsletter widget appear on the specified page, after the specified time period.