Last updated 11/20/2023
Before adding a Opt-in popup (Newsletter) tool make sure you have added the initialization script tag.
Add the Opt-in popup (Newsletter) tool to any page on your site. The Opt-in popup dialog will pop up after a specified number of seconds, prompting to user to authenticate with the provider of their choice to sign up or subscribe.
Bread & Butter remembers who has signed up, and won’t prompt them again.
This guide explains how to add the Opt-in popup tool to any page on your site, and how to configure the content you want it to display, including header image.
Note: You don’t need to add the ‘Continue with’ snippet for the Opt-in popup tool to work. The ‘Continue with’ pop up will be launched on its own.
Scroll down to the Custom Code section, for the Head tag.
In the Head Code field, paste in the following script tag:
<script> null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) }; injectBreadButter(function () { BreadButter.ui.addNewsletterWidget({ custom_event_code: 'CUSTOM_EVENT_NAME', delay_seconds: DELAY_TIME_SECONDS, header_text: 'HEADER_TEXT', main_text: 'BODY_TEXT', success_header: 'SUCCESS_HEADER', success_text: 'SUCCESS_TEXT', image_source: 'IMAGE_URL' }); }); </script>
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.
IMAGE_URL is optional. If you want to add your own custom image, replace IMAGE_URL with the source URL of the image you want to use. Recommended size: 200 x 100 px.
Add authentication & API event tracking to your website/app with a script tag & configuration