| Knowledge Base

Create a two-step display

  • Updated
  • read
Product Requirements
Convert_Icon.svg Privy Convert

A two-step display allows you to ease a visitor into providing their contact information. Rather than your display immediately asking for a bunch of information upfront, it offers a buffer step to garner some buy-in from the visitor or makes the signup process more approachable by spreading the desired fields over multiple steps. 

There are a few different ways to approach a two-step display, and each comes with some pros and cons, including the technical knowledge required to implement. With this in mind, it's encouraged that you review each of the options below before proceeding. The options are listed from least technical to most technical. 

Back-to-Back displays

This approach shows a second display immediately following the submission of another. This approach does not require any technical knowledge and does not require visitors to view a different page. It's a good starting place for beginners. Some factors to consider when implementing this approach include:

  • The first display must collect some visitor information (e.g., email address) to consistently and effectively trigger the second display. 
  • The displays can easily sync information to different providers. For example, you may want to collect the email address collected in step one to an email service provider (e.g., Mailchimp). In contrast, the second step/display can sync to a text messaging provider (e.g., Attentive). 

Note: The email address and phone number will not be connected in Privy if the fields are asked for on separate steps. A profile for the email and phone will exist separately. 

This two-step display would look something like this:

B2B_Two-step.gif

To create a two-step display using this approach: 

Create Step

  • A popup display type is recommended. 
  • Make sure there's no tab and no after signup action enabled for the display. 

Target Step

  • These settings are pretty flexible and vary based on your use-case. A display triggered by a timer or on exit-intent is a pretty safe bet. 

Follow-up Step

  • If applicable, add an automation rule to sync the collected information to a linked account. 
  • Use the same display type and design as step one. Copying the display and updating the copy's content/settings is the easiest way to ensure uniformity between steps. 

Create Step 

  • Make sure there's an active after signup action (e.g., a thank-you page) so the visitor's submission is acknowledged. This action can be paired with additional messaging, such as an after signup email or a text message.  

Target Step

  • The When to Show setting should be set to the "Immediately" option. 
  • The Who to Show setting should use the "Display signed up (this session) is {insert the name of your step one display}" option. 

Follow-up Step

  • If applicable, add an automation rule to sync the collected information to a linked account. 
  • If applicable, add an after signup message to deliver a discount or additional information. 

Check out the video below for more details and a preview of what you can expect a visitor to experience when signing up via this two-step display. The video features an older version of Privy aesthetically, but the steps, buttons, and overall concept remain the same. 

Display to a landing page

This approach uses a call-to-action in a display's thank-you page to encourage visitors to provide additional contact information for an additional gift or a larger discount. This approach is ideal if you hope to collect multiple additional fields in the second step. Some factors to consider when implementing this approach include:

  • The first display must collect some visitor information (e.g., email address) to trigger the display's thank-you page. 
  • The landing page that the visitor lands on must reconfirm identifiable contact information (e.g., email address) to ensure that the information collected by the two steps are merged into one Privy contact profile.  

This two-step display would look something like this:

LP_Two-step.gif

To create a two-step display using this approach, we'll work backward: 

  • The "step two" landing page must be published before the "step one" display so you can copy the page's URL from the Create step of the display builder and include it in the "step one" thank-you page as part of a button or link. 

Create Step

  • Use the landing page display type. 
  • Make sure a thank-you page after signup action is enabled for the display. This page should provide the additional incentive (e.g., coupon code) or let the visitor know how the incentive will be provided (e.g., email or text). 
  • If a discount code was offered for the initial signup, add or enable a coupon code and ensure that the thank-you page or after signup message includes the coupon code merge tag. 

Target Step

  • You may want the landing page to expire or to receive real-time notifications for signups but most users won't make changes to these settings. 

Follow-up Step

  • If applicable, add or enable an after sign-up message that provides the incentive.
  • If applicable, add an automation rule to sync the collected information to a linked account. 

Miscellaneous Tasks

  • Copy the landing page URL from the Create step of the display editor. The landing page must be published for this information to appear. 

Create Step 

  • A popup display type is recommended. 
  • Make sure the thank-you page after signup action is enabled for the display. 
  • The display's thank-you page should include a button/link that directs the user to the second step of the display - AKA the landing page. The landing page's URL is available in the Create step of the display builder after the display is published. 
  • If the display's steps are designed to entice visitors with discounts, make sure a coupon is selected and included in the thank-you page or after the signup message. 

Target Step

  • These settings are pretty flexible and vary based on your use-case. A display triggered by a timer or on exit-intent is a pretty safe bet. 

Follow-up Step

  • If applicable, add an automation rule to sync the collected information to a linked account. 
  • If applicable, add an after signup message to deliver a discount or additional information. 

Check out the video below for more details and a preview of what you can expect a visitor to experience when signing up via this two-step display. The video features an older version of Privy aesthetically, but the steps, buttons, and overall concept remain the same. 

Trigger one display with another

This approach uses a custom coded button in a display that closes the current display and triggers another. This approach is ideal if you'd like to ask a buffer/qualifying question before asking the visitor for information. Custom code is required, so this approach is considered more difficult than the others in this guide. This two-step display would look something like this:

Triggered_Two-step.gif

To create a two-step display using this approach, we'll work backward:

Create Step

  • A popup display type is recommended. 
  • Make sure the thank-you page after signup action is enabled for the display. 
  • The display's thank-you page should include relevant information for completing the second step. For example, provide a coupon code or set expectations for what's next. 
  • If a coupon code is offered, add or enable a coupon code. 

Target Step

  • Make sure that all of the display's When To Show triggers are disabled. The custom code added to "step one" will trigger the display manually. 

Follow-up Step

  • If applicable, add or enable an after sign-up message that provides the incentive.
  • If applicable, add an automation rule to sync the collected information to a linked account. 

Miscellaneous Tasks

  • While viewing the display in the builder, copy the display ID shown in the browser bar. The ID is shown after /displays/ in the page's URL. This is needed in the "First step" display. 

Create Step

  • A popup display type is recommended. 
  • Disable the form component of the display. 
  • Make sure there's no tab and no after signup action enabled for the display. 
  • Create at least one button using the custom code listed below. The "hide" value should reference the display ID listed in the URL as you edit the display; meanwhile, the "show" value should be the ID copied while creating the "step two / reveal" display. The styling, such as the colors and font, should be changed to match your branding.
<input
type="button"
onClick="Privy('hide', 2016115);Privy('show', 2016180);"
value="I need more info..."
style="border-radius: 0px;border: 0;width: 220px;height: 60px;font-family: Lato;font-size:18px;background-color: #10A0D0;color: #fff; cursor: pointer;"
/>

Target Step

  • These settings are pretty flexible and vary based on your use-case. A display triggered by a timer or on exit-intent is a pretty safe bet. 

Check out the video below for more details and a preview of what you can expect a visitor to experience when signing up via this two-step display. The video features an older version of Privy aesthetically, but the steps, buttons, and overall concept remain the same. 

Related articles