Last updated 05/29/2023
Before adding the ‘Contact us’ tool make sure you have added the initialization script tag.
The ‘Contact us’ tool allows you to add a contact us section to one or more pages on your website:
Users are prompted to authenticate first, before they can submit their message:
This allows you to convert your users while they are trying to contact you, and ensures that you only receive real requests from real, validate users.
Follow these steps to add the ‘Sign up / Sign in’ tool to a page:
Find the initialization script you have added to your webpage (see initialization script if you have not added it already)
In the initialization script, find the line:
BreadButter.configure({app_id: "[APP_ID]"});
Add the following line under BreadButter.configure();
<script> null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) }; injectBreadButter(function () { BreadButter.ui.contactUs({ continue_with_position: { bottom: '45px', right: '20px', }, show_phone: true, show_company_name: true, locale: { "CONTACT_US": { "HEADER": "Get in touch", "SUB_HEADER": "We'll get back to you as soon as possible.", "COLLAPSE": "Get in touch with us.", "BUTTON": "Submit", "SUCCESS": "Someone will be in touch with you soon", "ICON_NOTE": "Get in touch with us." } } }); }); </script>
Note: If you have other Bread & Butter feature snippets, just add this snippet below them.
The following content can be configured to suit your specific requirements (see screenshot):
You should now see the Contact us tool appear on the specified page.
Repeat the above steps for any other pages you want to add the Contact us tool.
You can also embed it directly in a page using this code:
<script> null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) }; injectBreadButter(function () { BreadButter.ui.contactUsForm('bb-contact-us',{ show_phone: true, show_company_name: true, locale: { "CONTACT_US": { "HEADER": "Get in touch", "SUB_HEADER": "We'll get back to you as soon as possible.", "COLLAPSE": "Get in touch with us.", "BUTTON": "Submit", "SUCCESS": "Someone will be in touch with you soon" } } }); }); </script>
Add authentication & API event tracking to your website/app with a script tag & configuration