WordPress ‘Continue with’ one-click conversions from a button click

Last updated 11/01/2023

This feature allows you to trigger the ‘Continue with’ when a user clicks a button on a page, by adding a shortcode.

You can even include the authentication prompt text, or customize the ‘Continue with’ header text for the specific scenario.

Step 1

Find the page or post where you want the 'Continue with' button to appear, and open it in Edit mode in WordPress.

Step 2

Place the cursor at the place in the page where you want to add the 'Continue with' button.

Step 3

Click the Toggle block inserter button, then search for and select Shortcode.

Step 4

In the shortcode block, enter the following:

[breadbutter-continuewith-button]Sign in here[/breadbutter-continuewith-button]

Where "Sign in here" is the button label, which you can set to whatever you'd like.

Step 5

You can also set various parameters for the 'Continue with' for your specific scenario, if you would like them to be different than the global defaults. For example:

show_login_focus - Display the auth prompt text (true/false).
continue_with_position - Set where the 'Continue with' is on the page.
css_class - Apply your own CSS to the button.
destination_url - Set the URL users will be sent to after authenticating.
on_login - Set a javascript function that the button calls in the signed in state.
Additional parameters can be found on Github.

Here's an example of the various parameters set:

[breadbutter-continuewith-button show_login_focus=true continue_with_position='{"right":50,"bottom":50}' css_class="new-class-for-continue-button" destination_url="https://yoursite.com/landingpage/" on_login=callToLoggedIn]Sign in here[/breadbutter-continuewith-button]

Step 6

Additionally, you can change the text in the authentication prompt screen with the following parameter:

locale='{"POPUP":{"TEXT_1":"Paragraph1","TEXT_2":"Paragraph2","TEXT_3":"Paragraph3","TEXT_3_2":"Paragraph32","MORE":"More"}}'

Step 7

Click Update to save and publish the change.

Don’t use Bread & Butter? Want to learn more about how Bread & Butter solves the four biggest problems facing marketers today? Book a demo and see how Bread & Butter is helping marketers make the most of their first-party data

BOOK A DEMO