Tailwind Logo

Difference point of Boxever Library and Sitecore Library - Sitecore Personalize

Personalize

Published: 2024-10-21

Sitecore Personalize templates are available in two patterns, Boxever Library and Sitecore Library, which are similar in design. In this article, we will review the differences between them.

Content Update

Please check the latest information on the following page

Differences in HTML code

You can see the difference in the HTML code. The code differs as follows: the code for Corner Popup's Boxever Library is as follows

HTML 
<!-- Use dynamic Guest variables, type ctrl+space or guest to explore available entities.-->
<!-- Type "d" to see decisioning helpers -->
<div id="bx-transition-card">
    <div class="img-container">
        <div class="img-container__image"></div>
    </div>
    <div class="bx-transition-card__body">
        <h3>[[Title | string | Title | {required:true, group: Title, order: 1}]]</h3>
        <p>[[Description | text | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt | {required:true, group: Description, order: 1}]]</p>
        <div class="options-container">
            <a id="bx-transition-card--secondary" class="options-container__secondary">[[Dismiss Text | string | No Thanks | {required:true, group: Secondary Button, order: 1}]]</a>
            <a id="bx-transition-card--primary" class="options-container__primary">[[CTA Text | string | Yes Please | {required:true, group: CTA Button, order: 1}]]</a>
        </div>
    </div>
</div>

Then, referring to the Sitecore Library, we see the following

HTML 
<!-- Use dynamic Guest variables, type ctrl+space or guest to explore available entities.-->
<!-- Type "d" to see decisioning helpers -->
<div id="pers-transition-card">
    <div class="img-container">
        <div class="img-container__image"></div>
    </div>
    <div class="pers-transition-card__body">
        <h3>[[Title | string | Title | {required:true, group: Title, order: 1}]]</h3>
        <p>[[Description | text | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt | {required:true, group: Description, order: 1}]]</p>
        <div class="options-container">
            <a id="pers-transition-card--secondary" class="options-container__secondary">[[Dismiss Text | string | No Thanks | {required:true, group: Secondary Button, order: 1}]]</a>
            <a id="pers-transition-card--primary" class="options-container__primary">[[CTA Text | string | Yes Please | {required:true, group: CTA Button, order: 1}]]</a>
        </div>
    </div>
</div>

For the boxever library, the id tag should start with "bx-", but for the Sitecore Library, it should start with "pers-". This difference is not limited to HTML, but also applies to CSS.

Check the difference in operation

We have already embedded a script for the haramizu.com site using the Sitecore Engage SDK with Google Tag Manager. First, we would like to show a preview of the Corner Popup Experience created in the Boxever Library.

librarycode01.png

When I run Preview, nothing is displayed and the QA Tool starts up, but when I look at its contents, the following error message is displayed.

librarycode02.png

The data to be displayed, such as HTML, has not been acquired. So, let's check using Sitecore Library.

librarycode03.png

When I view it in preview, a popup appears from the bottom right corner, and also when I check with the QA Tool, there are no errors.

librarycode04.png

Differences in JavaScript

Actually, the tampermonkey sample loaded JavaScript from the following URL

  • https://d1mj578wat5n4o.cloudfront.net/boxever-1.4.1.min.js

On the other hand, the JavaScript URL loaded using Google Tag Manager with Sitecore Engage SDK is as follows.

  • https://d1mj578wat5n4o.cloudfront.net/sitecore-engage-v.1.4.3.min.js

The boxever JavaScript library is provided for customers who already have Boxever or Sitecore CDP + Personalize, and for new deployments, the Sitecore Engage SDK is the way to go.

Summary

In this article, we have introduced the differences between the two types of templates available. If you are a new user, you may want to create a template based on the Sitecore Library.

Tags