First of all, we would like to create a sample for use with Personalize, as Sitecore Personalize provides sample code in the form of templates, so that simple popups can be easily implemented without writing anything.
Create a sample Experience
In this article, we will create a new personalization configuration using a hand-plate from Experience. First, go to the Sitecore Personalize administration page. The following screen shows a blank screen by default.
Click on the Create button in the upper right corner, and you will see three choices. In this case, we will select Web for personalization.
For the sake of simplicity, we will create a sample experience named "Sample Experience.
Still empty, but ready for personalization settings.
Content Creation
The above screen shows No content created yet and the status of content not created. Clicking on the Create variant button will display a selection of templates.
In this case, select Corner Popup (Boxever Library). Then the screen changes and a sample popup is already displayed.
The parameters used in the sample can be set on the screen displayed on the right. For example, for the image in the popup, if you add the URL of the image, the image will be added as follows
Check Advanced Edit
How is this component created? Click on the Advanced Edit button here, and the editing screen will change as shown below.
The HTML, CSS, and JavaScript provided with this template are available, and each is set up so that they can be entered in this right-hand field. For example, the background image is defined in CSS as follows
CSS
/*
[[Image URL | string || {required:true, group: General, order: 1}]]
*/
#pers-{{ref}} #pers-transition-card .img-container__image {
margin: 0;
background: [[Background Image Colour]];
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-h4);
background-image: url("[[Image URL]]");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Variables are set against HTML and stylesheets, so that the preview is actually typed and created. Templates can also be created and registered based on the sample.
This time, save the file with the default settings and the sample is ready to be used.
Summary
Complete this personalization setup by setting the text, URL of the link, etc. Your sample is now ready to be used. We will use this sample to create the part that will display the popup.