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.
Using Embed campaigns comes with a bunch of great benefits: increased engagement, conversions, and an improved user experience. Plus, they're totally customizable, so you can make them a perfect match for your brand. Check out some examples in our gallery of Embed campaigns.
Ready to kick off your first embed campaign? Just follow these steps or watch our handy video tutorial. Let's do this!
Step 1: Create an Embed Campaign
From your Wisepops dashboard, use our Campaign Assistant or Custom Campaign builder to create a new campaign.
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.
Go to the webpage where you want your embed to appear.
Right-click on the desired location for the embed.
Select 'Inspect' from the contextual menu.
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.
Move your cursor until you find a suitable container for your embed. The embed will be inserted as the first child of this container.
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.
Return to the Wisepops campaign builder and paste the copied selector. Then, select the desired position for your embed within the container using the dropdown menu.
Please note, if you update your website theme, these hierarchy-dependent selectors may stop working.