Shortcode

The [onetap_button] shortcode lets you place the Google Sign-In button anywhere on your WordPress site—in posts, pages, widgets, or page builder elements.

PRO Feature

The shortcode is a PRO feature. Upgrade to PRO to unlock this functionality.

Basic Usage

Add this shortcode to any post, page, or widget:

[onetap_button]

This displays the Google Sign-In button with your default settings.

Shortcode Parameters

Customize the button by adding parameters:

Parameter	Options	Default	Description
theme	outline, filled_blue, filled_black	From settings	Button color theme
text	continue_with, signin_with, signup_with, signin	From settings	Button text
shape	pill, rectangular	From settings	Button shape
size	large, medium, small	large	Button size
width	auto, number, 100%	auto	Button width
alignment	left, center, right	center	Container alignment

Parameter Examples

Theme Variations

[onetap_button theme="outline"]
[onetap_button theme="filled_blue"]
[onetap_button theme="filled_black"]

Text Variations

[onetap_button text="continue_with"]
→ "Continue with Google"

[onetap_button text="signin_with"]
→ "Sign in with Google"

[onetap_button text="signup_with"]
→ "Sign up with Google"

[onetap_button text="signin"]
→ "Sign in"

Shape Variations

[onetap_button shape="pill"]
→ Rounded corners

[onetap_button shape="rectangular"]
→ Square corners

Size Variations

[onetap_button size="large"]
→ 44px height

[onetap_button size="medium"]
→ 36px height

[onetap_button size="small"]
→ 28px height

Width Options

[onetap_button width="auto"]
→ Fits content

[onetap_button width="300"]
→ 300px wide

[onetap_button width="100%"]
→ Full container width

Alignment

[onetap_button alignment="left"]
[onetap_button alignment="center"]
[onetap_button alignment="right"]

Combined Parameters

Combine multiple parameters:

[onetap_button theme="outline" text="signin_with" size="medium" alignment="left"]

[onetap_button theme="filled_black" shape="rectangular" width="100%"]

Page Builder Integration

Elementor

1. Add a Shortcode widget
2. Enter [onetap_button]
3. Adjust Elementor spacing/styling

Divi

1. Add a Code module
2. Enter the shortcode
3. Style the module container

Gutenberg (Block Editor)

1. Add a Shortcode block
2. Enter [onetap_button]
3. Use block alignment controls

WPBakery

1. Add a Raw HTML element
2. Enter the shortcode
3. Adjust row/column settings

Beaver Builder

1. Add an HTML module
2. Enter the shortcode
3. Configure module settings

Use Cases

Custom Login Page

Create a page with:

<h2>Welcome Back!</h2>
<p>Sign in to access your account.</p>

[onetap_button theme="filled_blue" size="large" alignment="center"]

<p>or <a href="/wp-login.php">use email and password</a></p>

Sidebar Widget

In a Text widget:

[onetap_button theme="outline" size="medium" width="100%"]

Modal/Popup

In a popup plugin:

<div class="login-popup">
    <h3>Sign In</h3>
    [onetap_button alignment="center"]
</div>

Registration Landing Page

<div class="signup-hero">
    <h1>Join Our Community</h1>
    <p>Get started in seconds with Google.</p>
    [onetap_button text="signup_with" size="large" theme="filled_blue"]
</div>

Checkout Prompt

In checkout page content:

Already have an account?
[onetap_button text="signin_with" size="medium" theme="outline"]

Multiple Buttons

You can add multiple buttons on the same page:

<!-- Hero section -->
[onetap_button text="signup_with" size="large" theme="filled_blue"]

<!-- Below content -->
[onetap_button text="signin_with" size="medium" theme="outline"]

Each button works independently.

Conditional Display

The button automatically hides for logged-in users. You can also use WordPress conditionals:

<?php if (!is_user_logged_in()): ?>
    [onetap_button]
<?php endif; ?>

Or with a plugin like "Conditional Blocks":

[if_logged_out]
[onetap_button]
[/if_logged_out]

PHP Usage

For theme developers, use the PHP function:

<?php
if (function_exists('onetap_render_button')) {
    onetap_render_button([
        'theme' => 'filled_blue',
        'text' => 'continue_with',
        'size' => 'large',
        'alignment' => 'center'
    ]);
}
?>

Or echo the shortcode:

<?php echo do_shortcode('[onetap_button theme="filled_blue"]'); ?>

Styling the Container

The shortcode outputs:

<div class="onetap-shortcode-wrapper onetap-align-center">
    <div class="onetap-button-container">
        <!-- Google button -->
    </div>
</div>

Custom CSS

/* Container styling */
.onetap-shortcode-wrapper {
    margin: 20px 0;
    padding: 15px;
}

/* Left alignment */
.onetap-shortcode-wrapper.onetap-align-left {
    text-align: left;
}

/* Center alignment */
.onetap-shortcode-wrapper.onetap-align-center {
    text-align: center;
}

/* Custom background */
.onetap-shortcode-wrapper {
    background: #f5f5f5;
    border-radius: 8px;
}

Common Issues

Button Not Appearing

Causes:

1. User is logged in (buttons hidden)
2. Shortcode not rendered (caching)
3. JavaScript not loading

Solutions:

1. Test logged out / incognito
2. Clear page cache
3. Check browser console for errors

Wrong Styling

Causes:

1. Theme CSS conflicting
2. Parameter typo
3. Page builder overriding

Solutions:

1. Inspect element for conflicts
2. Check parameter spelling
3. Add custom CSS to override

Multiple Buttons Interfering

Cause: Usually not an issue—each is independent.

If issues occur:

1. Ensure each has unique placement
2. Check for JavaScript conflicts
3. Contact support

Shortcode Reference

All Parameters

[onetap_button
    theme="filled_blue"
    text="continue_with"
    shape="pill"
    size="large"
    width="auto"
    alignment="center"
]

Default Values

Parameter	Default
theme	Plugin settings value
text	Plugin settings value
shape	Plugin settings value
size	large
width	auto
alignment	center

Valid Values

Parameter	Valid Values
theme	outline, filled_blue, filled_black
text	continue_with, signin_with, signup_with, signin
shape	pill, rectangular
size	large, medium, small
width	auto, number (px), 100%
alignment	left, center, right

Next Steps

• Button Customization - More styling options
• Pages & Locations - Default button locations
• Custom Redirects - Where to send users