Gravito Light CMP release 3 (R3) introduces new more flexible ways to customize the look and feel of the CMP or use UI components originating from the website itself by running CMP in headless mode. Release jump between R2 and R3 requires some extra configurations, here you can find the minimum steps to migrate your existing CMP to R3.

  1. Add third layer (cookie report layer) texts to your configuration, as part of core.text:
...
actions: ["Accept all", "Accept selected", "Reject all"],
},
cookieReportLayer: {
	buttonTitle: "Cookie Report",
	heading: "Cookie Reports layer header",
	introductionText: "Cookies are small text files that websites can use to make the user experience more efficient. We use cookies on the website. We use cookies on this website to improve the visitor experience and to better serve you. Based on our scan, this is how the cookies that will be used based on the preference set by you.",
	beforeAcceptHeader: "Before Accepting",
	afterAcceptHeader: "After Accepting",
	nameHeader: "Name",
	domainHeader: "Domain",
	descriptionHeader: "Description",
	cookieTypeHeader: "Cookie Type",
	expiryHeader: "Expiry in days",
	httpOnlyHeader: "Http Only",
	noCookieDataMessage: "No scan results available",
	noCookieDataBeforeAcceptingMsg: "No cookies were found before Accepting the consents on this domain.",
	noCookieDataAfterAcceptingMsg:"No cookies were found after Accepting the consents on this domain "
}

2. If you had any CSS customizations with your R2 (or R1) CMP, you will need to re-implement those. Using custom CSS requires that you download custom.css from https://cdn.gravito.net/customcss/custom.css, edit the classes that you need and then include the custom.css to your deployment, either by downloading it as separate file, including in inline to your template or injecting it as part of the CMP code via TMS. You need also to turn the custom CSS on inside the CMP configuration:

gravitoCMPConfig.core.style.useCustomCss = true;

Following customization implemented on custom.css will show Gravito Light CMP as a modal instead of banner:

.gravitolightCMP-background-overlay {
    z-index: 2147483600;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.6);
    overflow-y: scroll;
    position: fixed;
    display: flex;
   
    justify-content: center;
    align-items: center;
}
.gravitolightCMP-modal-layer1 {
    z-index: 2147483601;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    background-color: #fff;
    width: 100%;
    min-height: auto;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 60vw;
    height: fit-content;
}
.gravitoLightCMP-layer2-modal {
    z-index: 2147483601;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 25%;
    box-sizing: border-box;
    background-color: #fff;
    width: 80vw;
    min-height: auto;
    border-radius: 2px;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    overflow: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.gravitoLightCMP-cookies-report-layer-action-div {
   
    width: max-content;
    position: absolute;
    bottom: 80px;
    right: 30px;
}