DIY Quick Start Guide – JavaScript Library

To integrate Bread & Butter into your website, you’ll need to use our JavaScript Library (JSL) for the frontend UI/interface.

Our JavaScript Library can be found here:

https://github.com/breadbutter/breadbutter-js

The following snippet initializes Bread & Butter on your website and prompts the user to authenticate with the ‘Continue with’ tool. This is usually placed in the header or template page to make sure it is run on all pages of your website.

<script>
window.initBreadButter = function() {
        BreadButter.configure({ app_id: APP_ID });
        BreadButter.ui.continueWith();
    };
    (function(d, s, id){ var js,fjs=d.getElementsByTagName(s)[0]; if(d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = 'https://cdn.breadbutter.io/dist/breadbutter.7.2.0.979.min.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'breadbutter-js'));
</script>

NOTE: The version of the Bread & Butter library is statically set in the following line of the code snippet:

https://cdn.breadbutter.io/dist/breadbutter.7.2.0.979.min.js

You will need to update the version to take advantage of new features

Code within the initBreadButter method will be called once the JSL is loaded.

The following will configure the JSL for your app. Every page that has the JSL configured will gather user analytics that will be displayed in your dashboard.

BreadButter.configure({ app_id: APP_ID });

NOTE: APP_ID needs to be replaced by the app id corresponding to your app. It can be found here:
https://app.breadbutter.io/app/#/app-settings

The following will trigger the ‘Continue with’ tool to prompt users that are not logged in to do so. This can be removed on pages where you don’t want your users to be prompted to sign in. It can also be removed altogether if you prefer not use this tool.

BreadButter.ui.continueWith();

You can use it to display login options on your website and allow users to authenticate with different providers like Google, etc.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data