Instant Lead Capture (Most Effective)

IInstant Lead Capture, Continue with widget, one-click lead capture, social login widget, lead capture widget, capture leads without a form, Google, LinkedIn, Apple, Microsoft, verified email, WordPress lead capture, Webflow lead capture, shortcode, open lead capture from a button, Auto-Gate

In short: Instant Lead Capture (the "Continue with" widget) docks to the corner of the screen and lets visitors raise a hand in one click, with an account they already have or a verified email address. Everyone who does becomes an Engaged Lead and syncs to your CRM with a researched profile and their full journey. On WordPress you set it up in the plugin, for your whole website or page by page, and you can also open it from a button or a menu link. On any other website you can open it from a button with a short script. Auto-Gate can also show it for you, on the visits and at the moments most likely to bring in a lead.

How it works

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

Once they've raised a hand, they have a secure session across your whole website, so they're never asked again. Their verified, researched 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 tucks away as the visitor scrolls, and if they close it, it stays hidden for 24 hours.
  • Asked once, never again. A visitor who has raised a hand isn't asked anywhere else on your website.
  • 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. Every profile is researched and synced the moment the visitor raises a hand.

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 website:

  • Positioning: 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 raise a hand, and how long it stays on screen.
  • Hide for returning users: stops the widget showing to visitors who have already raised a hand.
  • Header text: 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 line explaining why you're asking.

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:

  1. Open the WordPress editor for the page or post.
  2. Click the Bread and Butter logo at the top right, or click the Options button and select Bread and Butter under Plugins.
  3. Expand the Instant Lead Capture section in the right-hand panel.
  4. Change the position, success message, prompt text or button style.
  5. Under Advanced Settings, choose whether the 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]

Add Sign In to your navigation menu on WordPress

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

  1. In your WordPress admin, go to Appearance, then Menus.
  2. Click Screen Options at the top of the page and tick CSS Classes.
  3. Select the menu you want to change, usually your main header menu.
  4. Under Custom Links, enter #        as the URL and Sign In        as the link text, then click Add to Menu.
  5. Find the new Sign In item at the bottom of the menu list and expand it.
  6. In the CSS Classes field, enter bb-signup-signin       
  7. 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       
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.