Skip to main content

Page Builder Integration

OneTap Login works seamlessly with popular page builders. This guide covers integration methods for Elementor, Divi, Gutenberg, and other builders.

Overview​

Integration Methods​

MethodAvailabilityPage Builders
Automatic hooksFREEAll (standard pages)
Shortcode [onetap_button]PROAll page builders
Custom placementPROVia hooks

Shortcode Parameters (PRO)​

[onetap_button
    text="continue_with"       // signin_with, signup_with, signin
    theme="filled_blue"        // outline, filled_black
    shape="pill"               // rectangular
    size="large"               // medium, small
    width="300"                // 200-400
]

Elementor​

Standard WooCommerce Pages​

On default WooCommerce pages (My Account, Checkout):

  • Google sign-in appears automatically
  • No configuration needed
  • Works with Elementor-designed headers/footers

Custom Login Pages with Elementor​

Using Shortcode Widget​

  1. Edit page with Elementor
  2. Search for "Shortcode" widget
  3. Drag to desired location
  4. Enter: [onetap_button]
  5. Style with Elementor spacing controls

Elementor Shortcode Widget

Styling in Elementor​

Shortcode Widget Settings:
├── Content
│   └── Shortcode: [onetap_button]
├── Style
│   └── Typography (affects wrapper only)
└── Advanced
    ├── Margin: 20px 0
    ├── Padding: 0
    └── CSS Classes: custom-google-btn

With Elementor Pro Login Widget​

If using Elementor Pro's Login Form widget:

  1. Add Login Form widget
  2. Add Shortcode widget below
  3. Configure shortcode: 
    [onetap_button text="continue_with" theme="outline"]

Layout Example:

┌────────────────────────────────────────┐
│  [Elementor Login Form Widget]         │
│                                        │
│  Username: [____________]              │
│  Password: [____________]              │
│  [        Login        ]               │
│                                        │
│  ─────── or ───────                    │
│                                        │
│  [Shortcode Widget]                    │
│  [G Continue with Google]              │
└────────────────────────────────────────┘

One Tap with Elementor​

One Tap popup works alongside Elementor:

  • Appears on configured pages
  • Respects Elementor popups (z-index)
  • Mobile responsive

Elementor Custom CSS​

Add custom CSS for fine-tuning:

/* In Elementor > Custom CSS */
selector .onetap-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

selector .g_id_signin {
    transform: scale(1.1);
    transform-origin: center;
}

Divi​

Standard WooCommerce Pages​

Same as Elementor - automatic integration on standard pages.

Custom Pages with Divi Builder​

Using Code Module​

  1. Open Divi Builder
  2. Add new row/column
  3. Add Code module
  4. Enter shortcode: 
    <div class="divi-google-signin">
        [onetap_button text="continue_with" theme="filled_blue"]
    </div>
  5. Style with Divi settings or custom CSS

Divi Code Module

Divi Module Settings​

Code Module Settings:
├── Content
│   └── Code: [onetap_button]
├── Design
│   ├── Spacing
│   │   ├── Margin: 20px auto
│   │   └── Padding: 0
│   └── Sizing
│       └── Max Width: 400px
└── Advanced
    └── CSS Class: divi-google-btn

With Divi Login Module​

If using Divi's built-in Login Module:

  1. Add Login Module
  2. Add Code Module directly below
  3. Insert shortcode

Visual Structure:

Row
├── Column
│   ├── Login Module
│   └── Code Module (Google button)

Divi Theme Builder​

For site-wide login areas:

  1. Go to Divi > Theme Builder
  2. Edit body/header template
  3. Add Code Module where needed
  4. Insert shortcode

Divi Custom CSS​

/* In Theme Options > Custom CSS */
.divi-google-signin {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

.divi-google-signin::before {
    content: "or continue with";
    display: block;
    margin-bottom: 15px;
    color: #666;
}

Gutenberg (Block Editor)​

Using Shortcode Block​

  1. Add new block
  2. Search for "Shortcode"
  3. Enter [onetap_button]
  4. Publish/Update

Gutenberg Shortcode Block

Using Custom HTML Block​

For more control:

<!-- Custom HTML Block -->
<div class="google-signin-wrapper" style="text-align: center; margin: 2rem 0;">
    <p style="color: #666; margin-bottom: 1rem;">Or sign in with</p>
    [onetap_button text="signin_with" theme="outline"]
</div>

With Login Block (if using login plugins)​

If using a Gutenberg-based login block:

Group Block
├── Login Block (from plugin)
├── Separator Block
└── Shortcode Block: [onetap_button]

Block Patterns​

Create reusable pattern:

  1. Create desired block layout
  2. Select all blocks
  3. Click "..." menu > "Create pattern"
  4. Name: "Google Sign-In Section"
  5. Reuse across site

Full Site Editing (FSE)​

For block themes (Twenty Twenty-Four, etc.):

  1. Go to Appearance > Editor
  2. Edit templates (login, my-account)
  3. Add Shortcode block
  4. Save template

WPBakery (Visual Composer)​

Using Raw HTML Element​

  1. Add Row
  2. Add Raw HTML element
  3. Enter: 
    [onetap_button text="continue_with"]
  4. Save

Using Text Block​

Alternatively:

  1. Add Text Block
  2. Switch to Text tab (not Visual)
  3. Enter shortcode
  4. Save

WPBakery Custom CSS​

/* Element Custom CSS */
.vc-google-signin {
    text-align: center;
    padding: 20px;
}

Beaver Builder​

Using HTML Module​

  1. Add HTML Module
  2. Enter shortcode: 
    <div class="fl-google-signin">
        [onetap_button]
    </div>
  3. Style with module settings

Beaver Themer​

For site-wide placement:

  1. Edit theme layout
  2. Add HTML module to appropriate area
  3. Insert shortcode

Oxygen Builder​

Using Code Block​

  1. Add Code Block
  2. Switch to PHP/HTML
  3. Enter: 
    <div class="oxy-google-signin">
        <?php echo do_shortcode('[onetap_button]'); ?>
    </div>
  4. Style with Oxygen controls

Oxygen Conditions​

Show only for logged-out users:

  1. Select element
  2. Add condition: "User is not logged in"
  3. Shortcode only renders when appropriate

Brizy​

Using Shortcode Element​

  1. Add Shortcode element
  2. Enter [onetap_button]
  3. Style with Brizy controls

Brizy Popup​

For login popups:

  1. Create popup
  2. Add login form elements
  3. Add Shortcode element
  4. Style accordingly

Breakdance Builder​

Using Code Element​

  1. Add Code element
  2. Enter shortcode
  3. Style with Breakdance controls

With Breakdance Login Widget​

  1. Add Login widget
  2. Add Code element below
  3. Insert shortcode

Universal Tips​

Centering the Button​

Most builders support these approaches:

Flexbox wrapper:

<div style="display: flex; justify-content: center;">
    [onetap_button]
</div>

Text-align wrapper:

<div style="text-align: center;">
    [onetap_button]
</div>

Adding Separator​

<div class="login-divider">
    <span>or</span>
</div>
[onetap_button]

<style>
.login-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}
.login-divider::before,
.login-divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.login-divider span {
    padding: 0 10px;
    color: #666;
}
</style>

Responsive Considerations​

/* Mobile adjustments */
@media (max-width: 768px) {
    .google-signin-wrapper {
        padding: 15px;
    }

    .g_id_signin {
        transform: scale(0.9);
        transform-origin: center;
    }
}

Conditional Display​

Show only when logged out:

<?php if (!is_user_logged_in()): ?>
    <div class="google-signin-section">
        <?php echo do_shortcode('[onetap_button]'); ?>
    </div>
<?php endif; ?>

Troubleshooting​

Shortcode Shows as Text​

Cause: Shortcode not processed

Solutions:

  1. Ensure using correct element type (Shortcode, not Text)
  2. Check PRO license is active
  3. Verify plugin is activated

Button Not Appearing​

Cause: JavaScript not loading

Solutions:

  1. Check console for errors
  2. Verify Google credentials configured
  3. Test on standard page first

Layout Broken​

Cause: CSS conflicts

Solutions:

  1. Wrap in container div
  2. Apply reset CSS
  3. Use builder's isolation features

Button Wrong Size​

Cause: Container constraints

Solutions:

  1. Set explicit width on container
  2. Use shortcode size parameter
  3. Override with custom CSS

Best Practices​

Do's​

  • Test in builder preview
  • Use semantic containers
  • Add proper spacing
  • Test mobile view
  • Keep it simple

Don'ts​

  • Don't over-nest elements
  • Don't use conflicting CSS
  • Don't skip mobile testing
  • Don't forget conditional display

Next Steps​