Integration best practices

Based on what we've learned from successful OpenPass integrations, we identified key implementation best practices that significantly improve the user authentication experience. To maximize user satisfaction and authentication rates, consider the following guidelines.

TIP: To see OpenPass implementation best practices in action, check out The Trade Desk Edge Academy.

Pre-funnel

To optimize your authentication prompt, consider these best practices for Sign-In buttons, full-page content blocks, and inline content blocks.

NOTE: OpenPass doesn’t differentiate between sign-in and sign-up processes. If you need to handle them differently, create post-authentication workflows for each.

Sign-in button

To optimize the display of your Sign-In button, consider these tips:

• Prominently display the Sign-In button at the top-right corner of every page.
• Be sure the OpenPass button loads simultaneously with other single sign-on (SSO) buttons.
• Indicate clearly in the button’s text that it’s used for authenticating with your app or site. Match its font with your branding.
• Be sure the OpenPass button is clearly visible and not obscured by other authentication options, which could unfairly favor those options.

Full-page content block

To enhance the user experience, consider these best practices:

• Create a co-branded experience where OpenPass is the primary authentication entry point.

  NOTE: Co-branding often improves on a publisher's native experience by streamlining user access. Returning users or users from other properties can typically access content with a single click, eliminating the need for additional email addresses or manual email entry.

• Minimize unnecessary white space.

• Implement logic to prevent the sign-in modal from being obscured by other pop-ups, like takeover ad placements or newsletter sign-ups.

  The following screenshot shows the OpenPass sign-in modal obscured by the newsletter subscription popup.

Inline content block

To enhance the user experience, consider these best practices:

• Create a co-branded experience where OpenPass is the primary authentication entry point.
• List other SSO options below the co-branded experience.
• Be sure no alternative pop-ups obscure the content block screen.

Display

To optimize how OpenPass is displayed alongside other SSO options, consider these best practices:

• We strongly recommend using the redirect authentication flow option, as it generally yields a higher authentication rate.

• If you use sign-in modals, be sure that the Google one-tap option doesn't overlap or conflict with the OpenPass sign-in. Presenting different authentication options side-by-side can confuse consumers.

  The following screenshot shows the OpenPass and Google authentication options side-by-side, which can be confusing.

• To prioritize the OpenPass button and capture the user's attention, place it above other SSO selections.

  The following screenshot shows the OpenPass option placed above other SSO options.

• If you are using a custom OpenPass button, do the following:

  • Make sure the button matches your overall style for other SSO solutions. Otherwise, OpenPass may appear out of place, potentially influencing a user's decision to choose a different SSO login method.
  • Prevent blocked pop-up errors by adding a click handler.

• Reduce unnecessary spacing and white space for inline integrations. Make sure the user experience works on a mobile device too.

Post-authentication

To enhance the user experience post-authentication, consider these best practices:

• Redirect users to the same page they were on, with a notification confirming successful login. Replace the Sign-In button with a user management element that clearly indicates the user's logged-in status.
• Depending on your business model, give users access to an account management area.
• Do not verify user email addresses through other methods. This is unnecessary and leads to spam. OpenPass automatically verifies a user's email address to authenticate their identity.

Co-branding inline sign-in form

If you are using the OpenPass co-branded inline sign-in form, consider these best practices: