Instead of being directed to a sign-up screen, users are presented with a consent page to connect to Zapier, then proceed to the Zap editor if consented. If an existing Zapier account under the email does not exist, users will receive an email prompting them to finish setting up their account. This allows users to dive directly into the Zap editor to accomplish the task at hand efficiently and without context switching.

Case study

Signups to use Adalo’s integration jumped 40% after embedding Zapier with Quick Account Creation into their app builder. Read more about Adalo’s user experience and results.

Example implementation

This video demonstrates how to implement Quick Account Creation using the Zap template element within Adalo's platform. This provides users with a faster, seamless sign-up experience.

Prerequisites

Add support to embed elements

1

Visit the generator

Go to the generator tool for either the Full Zapier Experience or Zap templates element.

2

Customize

Customize the visual design and features of the embed solution of choice.

3

Generate your embed code

Generate the embed code in HTML, Vanilla JS, React, Angular, or Vue.js.

4

Replace placeholder properties

Replace the placeholder values set to sign-up-email, sign-up-first-name, and sign-up-last-name in the code Body. All three values and the client ID are required for Quick Account Creation.

5

Embed your embed code

Embed both the Head and Body code on your product’s page.

You can still embed the Full Zapier Experience and Zap templates element, or utilize the Workflow API without support for Quick Account Creation. If the four required fields aren’t provided, the embed will use the default behaviour redirecting users to Zapier’s signup page from your product’s page.

If you have an existing Full Zapier Experience or Zap templates element embed, you can add the new required fields for Quick Account Creation to your current code implementation, instead of re-customizing and regenerating the code. Make sure the Body code includes the below four fields with the placeholder values replaced:

clientId="your_integration_client_id"
signUpEmail="email_of_your_user@example.com"
signUpFirstName="first_name_of_your_user"
signUpLastName="last_name_of_your_user"

Add support to the Workflow API

Redirect users to the Zap editor

After an account is created with this implementation, a user token still needs to be procured to access specific Workflow API endpoints. Generally, since the user will already be signed in to their newly created account in an active session on Zapier, users won’t have to explicitly sign in again when prompted with Zapier’s OAuth flow.

1

Use the URL below to initiate Quick Account Creation, then redirect users into the Zap editor with the Zap template set in the parameters:


https://zapier.com/webintent/create-zap
    ?template=<zap-template-id>
    &utm_source=partner
    &utm_medium=embed
    &utm_campaign=partner_api
    &utm_content=partner_quick_account_creation
    &entry-point-location=partner_embed
    &referer=<referer>
    &referrer=<referrer>
    &sign-up-first-name=<sign-up-first-name>
    &sign-up-last-name=<sign-up-last-name>
    &sign-up-email=<sign-up-email>
    &client-id=<client-id>
2

Replace the following query parameter placeholders in the URL:

ParameterRequirementExplanation
client_idRequiredYour application Client ID.
templateRequiredAn ID of a Zap Template.
sign-up-first-nameRequiredFirst name of the user signing up.
sign-up-last-nameRequiredLast name of the user signing up.
sign-up-emailRequiredEmail address of the user signing up.
refer or referrerRequiredURL of the page where the user clicked the link.

Procure a token and redirect users to a custom URL

This implementation allows a new Zapier account to be created, provides an access token to Zapier’s Workflow API, then allows you to redirect users to a custom URL of your choosing.

1

Use the URL below to initiate Quick Account Creation, then redirect users to a specified URL:


http://api.zapier.com/v2/authorize
    ?redirect_uri=<redirect_uri>
    &scope=<scope>
    &response_type=<response_type>
    &client_id=<client_id>
    &sign_up_first_name=<sign_up_first_name>
    &sign_up_last_name=<sign_up_last_name>
    &sign_up_email=<sign_up_email>
2

Replace the following query parameter placeholders in the URL:

ParameterRequirementExplanation
redirect_uriRequiredThe page the user will be redirect to after OAuth.
scopeRequiredSpace (%20) separated values.
response_typeRequiredSet to token.
client_idRequiredYour application Client ID.
sign_up_first_nameRequiredFirst name of the user signing up.
sign_up_last_nameRequiredLast name of the user signing up.
sign_up_emailRequiredEmail address of the user signing up.

When Quick Account Creation is enabled

  • If the user is already logged into Zapier, they are redirected to the Zap editor.
  • If the user’s email is already associated with a Zapier account, but the user is not logged in, they are redirected to Zapier’s sign-in page.
  • If the user’s email is not associated with an existing Zapier account, they are redirected to the consent page.
    • If the user consents to the terms and selects “Continue”, a Zapier account is created on their behalf and they are redirected to the Zap editor. They receive an email to finish setting up their account shortly after the account is created.
    • If the user closes the consent page, no Zapier account is created.
    • If there is an error creating an account, the user is redirected to an error page.
  • In the event a user wants to sign up with a different email than the one supplied, they can edit that email within the consent page.
  • In the event a user has an existing Zapier account, but it’s not under the supplied email they also have an option to sign in to any other account from the consent page.

Was this page helpful?