SmartPush enables you to convert pop-ups into embedded forms, seamlessly integrating them into your website via a simple code snippet. Embedded forms are particularly effective for collecting customer information, such as for lead generation, surveys, registrations, or customer support. This article outlines how to set up and customize embedded forms to maximize their effectiveness.

Enabling Embedded Forms

SmartPush offers a rich library of pop-up templates, most of which support embedded forms. Follow the general steps below to enable one:

In SmartPush, go to Popups & Forms > Template Library.
(Optional) Use the Embedded filter under Type. to narrow down your search.
Select a desired template and proceed to the editor.
In the Exhibit tab, choose Embedded Form as the form type. Customize your form as needed. Learn more about customization in the next section.

Note: The Embedded Form option is available when the form is going to display on desktop or mobile browsers. Embedded forms are not supported for mobile app display.

1. Once you finish customization, click Save & Exit to save your edits. Click Activate to enable the form. A pop-up with the embed code appears. Copy and paste it into your site builder - add component - custom HTML. If you are building your website with SHOPLINE, you can perfom the following steps to associate the form with your online store's navigation menu.
2. Log in to your SHOPLINE admin panel, and go to Online Store » Navigation › Header. The Edit the navigation menu page appears. If your website has multiple sets of navigation controls, all those that need a form will need to be set up. learn how to embed the code into your website here.

Note:

Refresh the page if the form doesn’t appear after you pasted the code to your site builder.
The embed code remains the same even if you edit the form afterwards in SmartPush. To disable it, pause or delete it.

Customizing Embedded Forms

Due to their characteristics, embedded forms differ slightly from standard pop-ups in terms of features and configurations. Below are key customization options.

Teaser

Teaser is the portal to the pop-up that is constantly displayed on the edge of pages. It is not available to embedded forms.

The “Exhibit” Tab

Choose the device(s) that the embedded form will appear (desktop or mobile browsers).
Click the Copy button under Embed Code to copy the code and paste it into your site builder.

Note: This section will appear once the form is activated.

The “Push” Tab

Select an option from the Login status dropdown based on your needs.
Specify the availability of countries or regions.

Note: When you customize the page where the form will be embedded in the site builder, the system will display the embedded form for preview based on your current login status and the country or region you specify for display. For example, you want the form to be visible only to logged-in customers in the US. If you are currently not logged in to your store, located in the US, or both, you won’t see the desired preview.

The “Add blocks” tab

Available components are shown here. Drag and drop needed components to your desired position on the form. Then customize the components on the right pane. As the main purpose of embedded forms is to collect information, you can use the Single-choice option and Multiple-choice option components, among the other components, to let customers make selections.

Single-choice option: Customers select the best or most applicable choice.
- Field properties: It indicates the characteristic or purpose of the field. The default property is Gender, and you can select added custom properties or create a new one. Valid characters include A-Z, a-z, 0-9 and "_". The property describes the characteristic or purpose of this radio button, and it will be used as a property or filter when you create segmentations for email sending or automation flows. For example, you created a custom “occupation” property to learn the customer's background, this “occupation” property can be later used as a filter in your contact list to narrow down your search.
- Tag text: It’s the description or question you want to ask your customers. You can hide it by turning off the toggle.
- Option text: Write down the options. You must provide at least two options. Add up to 20 if needed.
- Required or optional: Specify if the field is mandatory.
Multiple-choice option: Customers are able to select multiple applicable choices. Configure Tag text, Option text, and Required or optional in the same way as you configure a radio button.
Other Components
- You can add multiple Birthday components to collect more than 1 birthday information. The default property is Birthday (the customer’s birthday), and you can select added custom properties or create a new one like “dad_birthday”, “mom_birthday”. It will be used as a property or filter when you create segmentations for email sending or automation flows. Configure Tag text, Date format, and Required or optional in the same way as you configure a radio button.
- You can also add a Drop-down component to collect custom information. The default properties are First name/Last name and Gender/Country, respectively. You can select added custom properties or create a new one. It will be used as a property or filter when you create segmentations for email sending or automation flows. Configure Tag text, Placeholder text, and Required or optional in the same way as you configure a radio button.

Overall Style

In the Pop-up style section, determine the alignment and the width of your embedded form by using the scale. If you want to use up the full width, turn on the Fullscreen display toggle.

Note: The theme settings of your site builder take precedence over SmartPush settings.

Setting up Embedded Forms

In This Article