Unlock the power of Embed Campaigns with Wisepops: Step-by-Step Guide

Lisa Fockens Updated by Lisa Fockens

Embed campaigns are a valuable tool in your digital marketing arsenal. They can help you collect email signups, promote offers, and guide visitors to specific pages seamlessly. By integrating directly into your website's layout, they provide a non-intrusive yet effective way to communicate.

Benefits of using embed campaigns are increased engagement, conversions, and enhanced user experience. They're fully customizable, allowing you to match your brand perfectly.

Ready to start your first embed campaign? Follow the steps below or watch our video tutorial.

Step 1: Create an Embed Campaign

  1. From your Wisepops dashboard, use our Campaign Assistant or Custom Campaign builder to create a new campaign.

  1. Choose the Embed format

Step 2: Customize Your Embed

Use the campaign builder to personalize your embed. Adjust headlines, paragraph text, button text, and button redirect settings to fit your needs. Remember, an embed can be as simple or complex as you need it to be.

Step 3: Position your Embed

Positioning your embed is crucial. This process involves using CSS selectors. Here's how:

Note: CSS selectors are commonly used by developers. You can learn more about them here.
  1. Go to the webpage where you want your embed to appear.
  2. Right-click on the desired location for the embed.
  3. Select 'Inspect' from the contextual menu.
  4. The developer tools will open on the 'Elements' tab. As you hover over the elements, a blue square will highlight the corresponding area on your webpage.
  5. Move your cursor until you find a suitable container for your embed. The embed will be inserted as the first child of this container.
  6. Copy the selector by right-clicking on the element, then selecting 'Copy', followed by 'Copy selector'.

For example, if you were designing an embed for https://www.xbox.com/en-us/consoles/xbox-series-x, and wanted it to sit between the Microsoft header and the Xbox Series X menu, you would select the CSS selector #TopContentBlockList_3 > div > div.

Ideally, the chosen container will have an 'id' parameter, and the copied selector will simply be the 'id' of the container, prefixed by #. However, if this isn't the case, Chrome will provide a selector based on the ancestors' hierarchy of the container.

Please note, if you update your website theme, these hierarchy-dependent selectors may stop working.

If you have any questions, please get in touch.

Contact