Skip to main content
All CollectionsCampaignsGeneral
How to add Custom HTML or embed forms in Poper Popup?
How to add Custom HTML or embed forms in Poper Popup?
Karan Bhakuni avatar
Written by Karan Bhakuni
Updated over a month ago

Elevate your popups with custom HTML elements or seamlessly embed forms to capture valuable data. Here's a step-by-step guide to get you started:

How to Add Custom HTML or Embed Forms:

Open Popup:

Navigate to the Poper editor and open the popup where you want to integrate custom HTML or embed a form.

Add Custom HTML Element:

Within the editor, click on "Add Element" to access the element options.


Choose "Custom HTML" from the menu.

Paste HTML Code:

In the settings panel for the custom HTML element, you'll find an HTML box. Paste the HTML code you wish to incorporate. This can include forms, videos, widgets, or any other HTML content.

Preview Custom HTML:

After pasting the HTML code, preview the custom HTML element within the editor to ensure it displays correctly. Use the preview feature to make any necessary adjustments to the code or styling.

Example: Embedding a Tally.so Form

Create Tally.so Form:

Start by creating your desired form within Tally.so. Customize it according to your requirements and obtain the embed code provided by Tally.so.

Copy Embed Code:

Once you have the embed code from Tally.so, copy it to your clipboard. This code contains the necessary HTML markup to display your form.

Paste Code in HTML Settings:

Return to the Poper editor and navigate to the popup where you want to embed the form. Add a custom HTML element as described earlier and paste the Tally.so embed code into the HTML box within the element settings.

Preview on Live Website:

Finally, preview the popup on your live website to ensure that the Tally.so form is embedded correctly and functioning as intended.

Example: Embedding a Calendly Appointment Scheduler

Open Calendly Dashboard

Navigate to your Calendly dashboard and log in if necessary.

Access Sharing Options

Locate the event you want to allow scheduling for and click the "Share" button.

Choose Inline Embed

In the sharing options, select "Add to website" and then choose "Inline Embed."

Copy Embed Code

Calendly will provide you with a unique embed code. Copy this code to your clipboard.

Paste Code in Poper

Return to the Poper editor and navigate to the popup where you want to embed the Calendly scheduler. Add a custom HTML element as described earlier and paste the copied Calendly embed code into the HTML box within the element settings.

Preview on Live Website

Finally, preview the popup on your live website to ensure that the Calendly scheduler is embedded correctly and allows users to schedule appointments.

Did this answer your question?