An Embedded Form is a sign up for that is fixed directly or “embedded” onto the page of your website, unlike displays such as popups, flyouts, or Spin To Wins which associated with a display animation (i.e., sliding in or popping up) and trigger based on audience targeting conditions. Embedded Forms are perfect for website footers, or web pages where you consistently want an opportunity for visitors to sign up for your email list. Create a new Embedded Form To create a new Embedded Form:
  • Navigate to Convert > All Displays.
  • Click Create new display. This will open our Templates page.
  • Our Embedded Forms need to be built using our Classic display builder, so navigate to this builder by selecting the Get started option in the lower left corner of your screen.
  • Name your display in the following prompt, specify whether you want to collect email, phone, or both, and select Create display.
  • In the Create step of the Classic display builder, you can click to edit:
    • Form Fields: what information you want to collect at sign up.
    • Compliance: whether you want new sign ups to go through a Single Opt-In or Double Opt-In process.
    • Validations: set any rules to restrict who may sign up for your display.
  • Click to Add a display.
  • On the following screen, select Embedded Form from the left side. Browse the templates and choose which one you’d like to start with. Press Choose selected in the upper right corner to open the designer.

​
Customize your Embedded Form

Now that you’ve selected a template to start from, it’s time to customize your display’s appearance.
With Embedded Forms, most people prefer to keep the design minimal in Privy so that it fits in with their site’s theme.

​
Add new elements

To add a text box, click + Add new element on the left.

​
Edit existing elements

To edit existing elements, click directly on them in your display. You can edit their settings, duplicate, or delete the element on the left. Under your Elements on the left, you can drag your elements to reorder them and edit your form’s background. Once you’re happy with your design, press Save & Close in the upper right corner.

​
Customize your Thank You Page

After saving your changes, you’ll be brought back to the Create step of your display builder. You’ll want to customize your display’s Thank You Page to confirm your contact’s sign up.
  • Scroll down and click to edit your Thank You Page Design.
  • If you’re offering a coupon code in exchange for a sign up, be sure to include the {{ signup.coupon_code }} merge tag on your Thank You Page.

​
Edit your settings

​
Attach a coupon code

If you are offering a coupon code in exchange for a sign up, be sure to attach your coupon to your display:
  • In your display’s Create step, scroll to edit the Coupon section and select the desired Coupon from the dropdown menu. Save.

​
Targeting

Since an Embedded Form only appears when someone visits the web page it’s embedded on, the only audience targeting option revolves around how long the form is available. If you would like the display to expire after a fixed period, move to the Target step and update the How Long to Show It setting.

​
Edit your Follow-Up actions

Once you’ve finalized your settings and audience targeting, you’ll want to make sure that you’re properly following up with your new sign up. Head to the Follow-Up step of your builder.

​
Launch your Embedded Form

Once you’ve finalized your design, targeting, and follow-up actions, select the Publish button at the upper right of the Follow-Up step and confirm your decision in the prompt. 

​
Embed your form onto your site

To retrieve the embed code once the display is published:
  • Navigate back to the Create step. 
  • Click the </> Get embed code button and copy the appropriate value.
  • Paste the embed code into the HTML of your external page. 
If you have a Shopify site, use the following instructions to embed your code into your footer:
  • Navigate to the Online Store > Themes section of your Shopify account.
  • Select the Actions button and then the Edit code option from the drop-down menu. 
  • Use the search bar to locate and open the footer.liquid file.
  • Use CTRL-F or CMD-F to locate”type”:“richtext”, in the % schema % section. 
  • Replace “richtext” with “textarea” and select the Save button at the top right. 
Next, make sure you’ve copied your Embedded Form’s code from Privy (as shown above).
  • Return to your Shopify tab and select the **Themes **option from the sidebar. 
  • On the Themes dashboard, click on the Customize button. 
  • In the Sections sidebar, select the Footer section and then add a Text element. 
  • Paste your Privy form’s embed code into the Text element.
    • Drag and drop the element to edit its placement. Moving the element higher will move it left, while lowering it will move the form to the right.
  • Select the Save button in the upper right after each change to reload and preview the form.
Here’s a preview of what the form might look like in your store’s footer: That’s it! Your Embedded Form is now incorporated into your content and will appear to site visitors. You can review your display’s performance at any time.