About
Overview
The Bolt Login Button is used to offer shoppers a way to quickly and passwordlessly sign in at multiple points during the shopping journey, including during account registration, account login, and checkout. Different variations of this button will appear depending on the login context.
Shopper Experience
The Bolt Login Button achieves:
-
Login Acceleration Helps shoppers sign in passwordlessly to login or create an account more seamlessly.
-
Checkout Acceleration Helps shoppers use Bolt to speed through checkout or certain steps within checkout.
The Bolt Login Button comes in two variants based on its usage for either Login Acceleration or Checkout Acceleration:
- Passwordless Sign In Button (Login Acceleration)
- Autofill Button (Checkout Acceleration)
Interactions
When shoppers click or tap on either button variant, the component produces the Login Modal.
Placement & Styling
States
The Login button has a number of variants based on the shopper’s login status and interactions with the button.
| Interaction | Variant Description |
|---|---|
| Enabled | White icon and text. Black button. |
| Hover | Yellow icon. White text. Gray button. |
| Pressed | Yellow icon. White text. Black button. |
| Focus | White icon and text. Black button. Blue background glow. |
Styling
This button is already styled to work well in a wide range of light and dark themed checkouts. No extra styling is required.
Implementation
Bolt uses the Login Context to determine optimal user experiences.
In all contexts excluding checkout, the login button will automatically mount below email fields that you have attached the Login Modal to if you used Login modal with the default settings (autoDetectEmail is enabled by default).
loginModal.attach("#login-email-group", { context: "sign_in" });
loginModal.attach("#register-email-group", { context: "register" });
The button’s text will be based on the login context:
| Value | Button Text | Placement Instructions |
|---|---|---|
sign_in, register, or pre_checkout |
“Passwordless Sign In” | Alongside Sign In Email Fields (login) or New User Registration Email Fields (register) |
checkout or null (default context value) |
“Autofill” | Alongside Checkout Steps |
NOTE
You can add more than one login button on the page using the same login component. Ensure you set the appropriate login context options.
loginModal.mountPasswordlessLoginButton(shopperEmail, "#login-email-group", {
context: "sign_in",
});
loginModal.mountPasswordlessLoginButton(shopperEmail, "#register-email-group", {
context: "register",
});
Checkout Pages
Login button is supported in multi step checkouts.
- You must determine if the user is signed in. Proceed if you don’t have the user’s account details.
- Add the login button at the top of the checkout step, such as Shipping and Payment.
- Call
mountPasswordlessLoginButtonwith the shopper email and a selector for where to mount the button. Typically the email is captured as one of the first checkout steps.
loginModal.mountPasswordlessLoginButton(
shopperEmail,
"#shipping-section",
"checkout"
);
loginModal.mountPasswordlessLoginButton(
shopperEmail,
"#payment-section",
"checkout"
);
Manually add Passwordless Sign In Button (alternative)
While it is recommended to use autoDetectEmail on the login modal, you can manually add the Passwordless Sign In button as shown below.
const loginModal = Bolt.create("login_modal", {
autoDetectEmail: false,
});
const loginContext = "sign_in"; // or "register", "pre_checkout" "checkout"
loginModal.mountPasswordLessLoginButton(
shopperEmail,
"#email-form-group",
loginContext
);