How to add the ‘Contact us’ Tool

Last updated 07/26/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, validated users. Submissions are sent by email to the app owner.

Follow these steps to add the ‘Contact us’ tool to a page:

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();

<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": "%FIRST_NAME%, how can we help?",
            "BUTTON": "%FIRST_NAME%, send your message",
            "SUCCESS":  "Thanks for reaching out %FIRST_NAME%. We'll get back to you as soon as possible",
            "ICON_NOTE": "Get in touch with a real person"
        },
        "POPUP": {
            "TEXT_1": "Sign in to continue",
            "TEXT_2": "'Continue with' your trusted login method. We'll have you started in no time.",
            "TEXT_3": "You will be redirected to authenticate with your chosen account. We don’t see your password, only confirmation that you authenticated successfully and securely.",
        }
    }
});
});
</script>

Step 4

The following content can be configured to suit your specific requirements (see screenshot):

show_phone: Show the "Phone" field on the contact us form.
show_company: Show the "Company Name" field on the contact us form.
For the position, you can set an edge and the number of pixels in from that edge.
For the locale fields, see below for the text locations. You can the %FIRST_NAME% parameter to the SUB_HEADER, BUTTON, or SUCCESS fields, but not the other fields.

Note: Each parameter in the locale file has default text, so you don't need to specify them here if you don't want to.

Step 5

You should now see the Contact us tool appear on the specified page.

Step 6

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": "%FIRST_NAME%, how can we help?",
            "BUTTON": "%FIRST_NAME%, send your message",
            "SUCCESS":  "Thanks for reaching out %FIRST_NAME%. We'll get back to you as soon as possible",
            "ICON_NOTE": "Connect with us"
        },
        "POPUP": {
            "TEXT_1": "Sign in to continue",
            "TEXT_2": "'Continue with' your trusted login method. We'll have you started in no time.",
            "TEXT_3": "You will be redirected to authenticate with your chosen account. We don’t see your password, only confirmation that you authenticated successfully and securely.",
        }
    }
});
});
</script>