Instant Lead Capture (Most Effective)

Instant Lead Capture turns website visitors into verified leads with one click and no code. It's a small floating widget that gives every visitor the chance to continue with Google, LinkedIn, Apple or Microsoft, or with an email address, from any page on your site.

In short: Instant Lead Capture (the "Continue with" widget) docks to the corner of the screen and lets visitors verify with a social account or an email address in one click. Each person who converts lands in your Engaged Leads tab and syncs to your CRM with their profile and User Journey attached. On WordPress you set it up in the plugin, globally or page by page, and can also open it from a button or a menu link. On any other site you can open it from a button with a short script.

How it works

The widget appears on the pages you choose, a set number of seconds after the page loads. A visitor clicks the social account they want to use, or enters their email address, and they're done. There's no form to fill in.

Once they convert, they get a secure session across your whole website, so they're never asked again. Their verified profile goes to your Engaged Leads tab and syncs to your CRM straight away.

Why use Instant Lead Capture

One click instead of a form. Visitors use an account they already have, so there's nothing to type.
Stays out of the way. The widget collapses as the visitor scrolls, and if they close it, it stays hidden for 24 hours.
Asked once, never again. A visitor who has converted isn't prompted anywhere else on your site.
Real people, real addresses. Social accounts are verified by the provider, and email addresses are checked in real time, so fake entries stay out of your CRM.
Ready for your CRM. Profiles are enriched and synced as soon as the visitor converts.

Set up Instant Lead Capture on WordPress

In your WordPress admin, click Bread and Butter in the left menu, then select Instant Lead Capture. These settings apply across your whole site:

Positioning: choose where the widget sits on the screen, vertically and horizontally, and how far it is from the edge.
Popup delay: the number of seconds after the page loads before the widget appears.
Success message: the message visitors see after they convert, and how long it stays on screen.
Hide for returning users: stops the widget from showing to visitors who have already converted.
Header text: set different text for new and returning visitors. You can use %APP_NAME% to insert your website's name.
Focus mode and explainer text: blurs the page behind the widget and shows a short explanation of why you're asking visitors to sign in.

Click Save when you're done.

Set custom rules for a single page

Every Instant Lead Capture setting can be changed for an individual page:

Open the WordPress editor for the page or post.
Click the Bread and Butter logo at the top right, or click the Options button and select Bread and Butter under Plugins.
Expand the Instant Lead Capture section in the right-hand panel.
Change the position, success message, sign-in prompt or button style.
Under Advanced Settings, choose whether the sign-in options show as icons or tiles.

Open Instant Lead Capture from a button on WordPress

You can also open Instant Lead Capture when a visitor clicks a button, for example a "Get free access" button on a landing page. Add a Shortcode block where you want the button, and enter:

[breadbutter_continuewith_button]Sign in here[/breadbutter_continuewith_button]

The text between the two tags is the button label.

You can add these settings to the shortcode:

Setting	What it does
`show_login_focus`	Set to `true` to blur the page behind the prompt, or `false` to leave it clear
`continue_with_position`	Shows the prompt somewhere other than its usual position
`css_class`	Adds your own CSS class so you can style the button
`destination_url`	The page visitors are sent to after they convert. Leave it out to keep them on the same page.
`on_login`	The name of a JavaScript function to run once the visitor is signed in
`locale`	Your own text for the prompt. The text settings are listed in the table further down.
`delay_seconds`	delays widget display by N seconds

Here's a button with the page blurred, a custom CSS class and custom prompt text:

[breadbutter_continuewith_button show_login_focus=true css_class="new_class_for_button" locale='{"POPUP":{"TEXT_1":"Get free access","TEXT_2":"Continue with the account you already use","TEXT_3":"We only receive your name and email address.","MORE":"Why sign in?","TEXT_3_2":"Signing in means you never have to fill in a form on this site again."}}']Get Free Access[/breadbutter_continuewith_button]

You can add a Sign In link to your main menu that opens Instant Lead Capture:

In your WordPress admin, go to Appearance, then Menus.
Click Screen Options at the top of the page and tick CSS Classes.
Select the menu you want to change, usually your main header menu.
Under Custom Links, enter # as the URL and Sign In as the link text, then click Add to Menu.
Find the new Sign In item at the bottom of the menu list and expand it.
In the CSS Classes field, enter bb-signup-signin
Click Save Menu.

Visitors who haven't signed in see the Instant Lead Capture prompt when they click it. Visitors who have see their name, with a Sign Out option underneath.

Not on WordPress? Open Instant Lead Capture from a button with a script

On any other website, you can open Instant Lead Capture when a visitor clicks one of your buttons. The Bread & Butter snippet must already be installed (see JavaScript Snippet, or Install Bread & Butter on Webflow).

Step 1: Give the button an ID

Select the button and give it a unique ID. On Webflow, select the button, click the gear icon in the right pane to open Element Settings, and enter a unique name in the ID field, for example get-access-button .

The ID is what connects the script to the button.

Step 2: Add the script to the page

Add this script to the head of the page, below the Bread & Butter snippet. If you already have other Bread & Butter scripts there, add it below them. On Webflow, open Pages in the left menu, hover over the page, click the gear icon, scroll down to Custom Code and paste it into the Head Code field.

<script>
null == window.breadbutterQueue && (window.breadbutterQueue = []), window.injectBreadButter = function (e) { "undefined" != typeof BreadButter && BreadButter.init ? e() : window.breadbutterQueue.push(e) };
injectBreadButter(function () {
    BreadButter.ui.applyContinueWithTrigger("BUTTON_ID", {
        destination_url: 'URL',
        show_login_focus: true,
        locale: {
            "POPUP": {
                "TEXT_1": "TEXT_1",
                "TEXT_2": "TEXT_2",
                "TEXT_3": "TEXT_3",
                "MORE": "MORE",
                "TEXT_3_2": "TEXT_3_2"
            }
        }
    });
});
</script>

Step 3: Change the settings

Replace BUTTON_ID with the ID you gave your button in Step 1, then change the other settings to suit you.

Setting	What it does
`destination_url`	The page visitors are sent to after they convert. Remove it to keep them on the same page.
`show_login_focus`	Set to `true` to blur the page behind the prompt, or `false` to leave it clear
`button_theme`	How the sign-in options are shown: `tiles` (the default), `round-icons` or `square-icons`
`locale`	Your own text for the prompt. Remove the whole `locale` block to use the default text.

Setting	What it does
`destination_url`	The page visitors are sent to after they convert. Remove it to keep them on the same page.
`show_login_focus`	Set to `true` to blur the page behind the prompt, or `false` to leave it clear
`locale`	Your own text for the prompt. Remove the whole `locale` block to use the default text.

Step 4: Save and publish

Save your changes and publish your site. On Webflow, click Save Changes, then publish.

To open Instant Lead Capture from more than one button, give each button its own ID and repeat the BreadButter.ui.applyContinueWithTrigger(...) call for each one inside the same script.

The prompt text (`locale.POPUP` )

These settings work the same way in the WordPress shortcode and in the script. Every one has a default, so only include the ones you want to change.

Setting	Where it appears
`TEXT_1`	The heading of the prompt
`TEXT_2`	The line below the heading
`TEXT_3`	The third paragraph
`MORE`	The label on the link that expands more text
`TEXT_3_2`	The text shown when the visitor clicks `MORE`