DIY Quick Start Guide – JavaScript Library

Last updated 06/06/2022

To integrate Bread & Butter into your website, you’ll need to use our Javascript Library 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 widget. 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.5.8.0.587.min.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'breadbutter-js'));
</script>

NOTE: The version in the JS src file is static. You will need to update the version to take advantage of new features (ie: https://cdn.breadbutter.io/dist/breadbutter.5.8.0.587.min.js)

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 continueWith widget 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 login.

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.