Note:
This guide is applicable to customers on LimeSpot Max, Premium, Essentials, and other legacy plans.
This section is technical and requires an understanding of HTML and CSS. For a quick reference of CSS Selectors, click here.
When you have created your HTML campaign, the last step is to activate the campaign. Navigate to LimeSpot > Personalization > Product Recommendations and click on Designer.
On the left-hand panel, navigate to the page where you want to add your personalized content campaign. Under the Content section, click on + Add Personalization, and select HTML Personalization.
You will be directed to a panel where you have to select that appropriate image personalization campaign.
After selecting the campaign from the HTML Campaign dropdown, you need to indicate where to place the content. This is achieved by providing a few key pieces of information.
Container Selector
The Container Selector requires to be a unique selector of that section. HTML IDs are generally preferred. These can be found and set manually by inspecting the page markup, or by using the finder icon to help.
Once you have identified the container, click on the check mark to copy the selector in the
Container Selectorfield.Use the finder icon to pick
Image (Large) Selectorwhich is suitable for desktop display. Make sure you are selecting the image which is inside the Container.
Click on the check mark once it's the correct selector.
Lastly, preview how it would look by choosing the Audience Segment that it is targeted for.
And voila! It's done. Make sure the aspect ratio of the image you want to replace fits the original image.
Remember to Save and Publish your changes so they are live.
Other placement options not pictured above
Heading Selector: The CSS selector for your main heading text. Typically this would be the <h1> tag.
Subheading Selector: The CSS selector for your subheading text. Typically this would be the <h2> tag.
Destination URL Selector: The CSS selector for your Call-to-Action button on your image.
Image (Small) Selector: The Image Selector for your mobile/tablet view.
Do not hesitate to reach out via the in-app chat icon or email us if you need help with advanced features.