How to create Embed (In Page) Campaigns in Poper
Poper's embed feature allows you to strategically place popups or widgets within specific sections of your web pages. This guide will walk you through the process of creating embeds and customizing their placement.
Steps to Create an Embed:
Access Your Poper Dashboard:
Log in to your Poper account and navigate to the main dashboard.
Click "New Embed":
You'll find a button labeled "New Embed" or similar. Click on this button to start creating a new embed campaign.
Choose an Embed Template:
Poper might offer pre-designed embed templates. Select the template that best suits your needs or choose a blank template for complete customization.
Customize the Embed (Optional):
If you've selected a template, you can customize its design, content, and settings within the campaign editor. Adjust the width, height, and other visual elements to match your website's style.
Define Display Rules:
The most crucial step is to determine where you want the embed to appear on your webpage. This is achieved using CSS targeting.
Understanding CSS Targeting:
CSS selectors are used to identify specific elements within your webpage's HTML structure. By targeting these elements, you can precisely control the placement of your Poper embed.
Choosing the Right Placement:
- Before the Element: If you want the embed to appear before a specific element on your page, use the CSS selector of that element and select the "Before Element" option in Poper's display rules.
- After the Element: To place the embed after an element, use the CSS selector of that element and select the "After Element" option.
- Inside the Element (First Child): If you want the embed to appear as the first child within a specific element, use the CSS selector of that element and select the "Inside Element as First Child" option.
- Inside the Element (Last Child): Similarly, if you want the embed to appear as the last child within an element, select the "Inside Element as Last Child" option.
Finding CSS Selectors:
- Use your browser's developer tools to inspect the HTML structure of your webpage. Locate the element where you want to place the embed and identify its CSS selector.
- There are also browser extensions and online tools available to help you find CSS selectors.
Here's our dedicated guide on finding CSS Selector of element - https://help.poper.ai/portal/en/kb/articles/how-to-find-css-selectors-for-your-elements-in-your-website
Additional Considerations:
- Ensure the CSS selector you use accurately targets the desired element. Incorrect selectors can lead to unexpected placement.
- Avoid placing embeds within form elements, buttons, anchors, or paragraphs, as this can violate HTML rules and cause rendering issues.
Saving and Testing:
Save Your Changes:
Once you've configured the display rules and other settings, click the "Save" button to apply the changes to your embed.
Test Your Embed:
Open your website in a new tab and navigate to the page where you've placed the embed. Verify that it appears in the correct position and functions as expected.
By following these steps and leveraging CSS targeting, you can effectively place your Poper embeds within your web pages, providing a seamless and integrated user experience.
Related Articles
After Page Load Trigger
The Delay Trigger in Poper.ai allows you to control when a popup will appear based on the time a user has spent on your page. Here are the steps to set up a Delay Trigger for your popup: 1. Create a New Popup: - Click on '+ New Popup' on your ...Using Wildcards in Page Targeting
Follow this guide to learn how to use wildcards for page targeting in Poper. Wildcards allow you to create flexible and dynamic targeting rules to match multiple pages with similar URLs. Steps to Set Up Wildcard Page Targeting: Access Poper ...How to Integrate Poper Campaigns with External Tools
Poper offers a wide range of integration options, allowing you to seamlessly connect your campaigns with other popular marketing and analytics tools. This guide will provide a general overview of the integration process and direct you to specific ...Adding Attention-Grabbing Animations to Your Poper Campaigns
Poper allows you to enhance your campaigns with eye-catching animations that draw attention to your popups, widgets, and videos. This guide will walk you through the process of adding attention-seeking animations to your Poper campaigns. Steps to ...How to add Custom HTML or embed forms in Poper Popup?
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 ...