Skip to main content
All CollectionsPlugins
reCAPTCHA Plugin
reCAPTCHA Plugin

This article will guide you through the steps to add and configure the Google reCAPTCHA v2 Plugin in your Bubble application.

Adam avatar
Written by Adam
Updated over 4 months ago

Step 1: Get Your Google reCAPTCHA Site Key

Before you can use the plugin, you’ll need a Site Key from Google reCAPTCHA.

  1. Log in with your Google account.

  2. Register your site by clicking + Add in the reCAPTCHA Admin Console.

  3. Choose reCAPTCHA v2 and select the option “I’m not a robot” Checkbox.

  4. Enter the domain name of your Bubble app (e.g., your-app-name.bubbleapps.io).

  5. Accept the reCAPTCHA Terms of Service.

  6. Click Submit.

  7. Copy the Site Key from the provided keys in the Google reCAPTCHA dashboard.

Step 2: Add the Site Key to Your Bubble App

Now that you have your Google reCAPTCHA Site Key, add it to the plugin settings in Bubble.

  1. In your Bubble app editor, navigate to Plugins> reCAPTCHA > Site Key.

  2. Paste the Site Key you copied from Google reCAPTCHA.

Step 3: Add the reCAPTCHA Element to Your Page

After configuring the plugin, you can add the reCAPTCHA element to any page in your app where you want to verify users.

  1. In your Bubble Editor, open the page where you want to place the reCAPTCHA.

  2. From the Elements tab, select Plugins and choose the reCAPTCHA v2 element.

  3. Drag and drop the reCAPTCHA element onto your page (e.g., a login or sign-up form).

  4. Customize the size and position of the element as needed.

Step 4: Customize the reCAPTCHA Theme

You can adjust the appearance of the reCAPTCHA widget to fit your app's design.

  1. Select the reCAPTCHA element on your page.

  2. In the properties panel, you will see options to change the theme:

    • Light Theme: The standard white background with a grey border.

    • Dark Theme: A black background with a white border for darker page designs.

  3. Choose the theme that matches your app's style.

Step 5: Going Live

Once you've tested the reCAPTCHA widget in your development environment, make sure you:

  1. Add your live domain (e.g., www.your-app.com) to the list of authorized domains in the Google reCAPTCHA Admin Console.

  2. Deploy your Bubble app to live mode.

Troubleshooting Tips

  • Missing Site Key: Ensure you’ve copied the correct Site Key from the Google reCAPTCHA dashboard and pasted it into the API Keys section of your app's settings.

  • Widget Not Displaying: Confirm that the domain in your Google reCAPTCHA settings matches your app’s domain. Double-check the theme settings in the properties panel.

  • reCAPTCHA Failing Verification: Ensure that reCAPTCHA is properly configured and that the user is successfully completing the CAPTCHA challenge.

Did this answer your question?