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:

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.