Getting Started

Introduction

Gravito CCPA CMP is a Consent Management Platform (CMP) that helps you manage user consent for your website. It is designed to help you comply with the California Consumer Privacy Act (CCPA) and other privacy regulations.

Features

  • Consent Management: Manage user consent for your website.
  • CCPA Compliance: Comply with the California Consumer Privacy Act (CCPA).
  • Customizable: Customize the CMP to match your website's look and feel.
  • Easy Integration: Easily integrate the CMP with your website.

CMP Preview

Here is a preview of the Gravito CCPA CMP:

Gravito CCPA CMP

CCPA CMP Configuration

Here you can find the configuration options for the Gravito CCPA CMP.

Property Name Purpose Datatype
title The title of the CMP. String
introductionText The introduction text displayed at the top of the CMP below title. String
cookieName The name of the cookie used to store user preferences. String
cookieExpiry The expiry time of the cookie in days. Number
defaultUspString The default USPrivacy string to be used if the cookie is not present. String
consents The list of consents to be displayed in the CMP. Array
consents[i] > name The name of the consent. String
consents[i] > label The label of the consent. String
logoUrl The URL of the logo to be displayed in the CMP. String
style The style configuration of the CMP. Object
style > customCss The custom CSS to be applied to the CMP. String
style > fonts The font configuration of the CMP. Array
style > fonts[i] > url The URL of the font file. String
style > fonts[i] > unicodeRange The unicode range of the font. String
componentUrl The URL of the component to be loaded in the CMP. String

CSS Customization

CSS customization can be done by adding the custom CSS in the style section of the CMP config. The following are the CSS classes that can be used to customize the CMP.

Class Name Purpose
.gravitoCcpaCmp-card to customize the CMP modal/card
.gravitoCcpaCmp-logo-container to customize the CMP logo container
.gravitoCcpaCmp-logo to customize the CMP logo image
.gravitoCcpaCmp-title to customize the CMP title
.gravitoCcpaCmp-description to customize the CMP description
.gravitoCcpaCmp-checkbox-container to customize the consent container
.gravitoCcpaCmp-checkbox to customize the checkbox styling
.gravitoCcpaCmp-row to customize the checkbox label
.gravitoCcpaCmp-btn-container button to customize the CMP action button

Example Configuration

{
  "title": "Gravito CCPA CMP",
  "introductionText": "We value your privacy. Our website uses cookies and similar technologies to enhance your experience. By continuing to browse, you consent to their use as outlined in our <a href='' target='_blank'>Privacy Policy</a>. You may manage your preferences at any time.",
  "cookieName": "usprivacy",
  "cookieExpiry": 30,
  "defaultUspString": "1YYY",
  "consents": [
    {
      "name": "notice",
      "label": "Notice/Opportunity to Opt Out"
    },
    {
      "name": "optOutSale",
      "label": "Opt-Out Sale"
    },
    {
      "name": "lspa",
      "label": "LSPA Covered Transaction"
    }
  ],
  "logoUrl": "https://cdn.gravito.net/logos/Gravito-logo-Dark.png",
  "style": {
    "customCss": "",
    "fonts": [
      {
        "url": "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2",
        "unicodeRange": "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;"
      },
      {
        "url": "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2",
        "unicodeRange": "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;"
      }
    ]
  },
  "componentUrl": "https://gravitocdn.blob.core.windows.net/ccpa"
}

Deployment

To deploy the Gravito CCPA CMP on your website, there are majorly two ways:

  1. Deployment Script: You have to paste the deployment script provided by gravito into your website's HTML code just after the opening <body> tag. The deployment script will load the CMP on your website.
<script>
  var gravitoCMPConfig = {
    title: "Gravito CCPA CMP",
    introductionText:
      "We value your privacy. Our website uses cookies and similar technologies to enhance your experience. By continuing to browse, you consent to their use as outlined in our <a href='https://www.gravito.net/privacy-notice/' target='_blank'>Privacy Policy</a>. You may manage your preferences at any time.",
    cookieName: "usprivacy",
    cookieExpiry: 30,
    defaultUspString: "1YYY",
    consents: [
      {
        name: "notice",
        label: "Notice/Opportunity to Opt Out",
      },
      {
        name: "optOutSale",
        label: "Opt-Out Sale",
      },
      {
        name: "lspa",
        label: "LSPA Covered Transaction",
      },
    ],
    logoUrl: "https://cdn.gravito.net/logos/Gravito-logo-Dark.png",
    style: {
      customCss: "",
      fonts: [
        {
          url: "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2",
          unicodeRange:
            "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;",
        },
        {
          url: "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2",
          unicodeRange:
            "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;",
        },
      ],
    },
    componentUrl: "https://gravitocdn.blob.core.windows.net/ccpa",
  };
  window.gravitoCMPConfig = gravitoCMPConfig;

  var gravitoSDKTag = document.createElement("script");
  gravitoSDKTag.type = "module";
  gravitoSDKTag.src = "https://cdn.gravito.net/sdkv3/latest/sdk.js";
  gravitoSDKTag.onload = function () {
    window.gravito.init("CCPA");
  };
  document.body.appendChild(gravitoSDKTag);
</script>
  1. Using GTM: You can also deploy the CMP using Google Tag Manager (GTM). You have to create a GTM tag and paste the deployment script provided by gravito into the tag.
<script>
  var gravitoCMPConfig = {
    title: "Gravito CCPA CMP",
    introductionText:
      "We value your privacy. Our website uses cookies and similar technologies to enhance your experience. By continuing to browse, you consent to their use as outlined in our <a href='https://www.gravito.net/privacy-notice/' target='_blank'>Privacy Policy</a>. You may manage your preferences at any time.",
    cookieName: "usprivacy",
    cookieExpiry: 30,
    defaultUspString: "1YYY",
    consents: [
      {
        name: "notice",
        label: "Notice/Opportunity to Opt Out",
      },
      {
        name: "optOutSale",
        label: "Opt-Out Sale",
      },
      {
        name: "lspa",
        label: "LSPA Covered Transaction",
      },
    ],
    logoUrl: "https://cdn.gravito.net/logos/Gravito-logo-Dark.png",
    style: {
      customCss: "",
      fonts: [
        {
          url: "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXjeu.woff2",
          unicodeRange:
            "U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;",
        },
        {
          url: "https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2",
          unicodeRange:
            "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;",
        },
      ],
    },
    componentUrl: "https://gravitocdn.blob.core.windows.net/ccpa",
  };
  window.gravitoCMPConfig = gravitoCMPConfig;

  var gravitoSDKTag = document.createElement("script");
  gravitoSDKTag.type = "module";
  gravitoSDKTag.src = "https://cdn.gravito.net/sdkv3/latest/sdk.js";
  gravitoSDKTag.onload = function () {
    window.gravito.init("CCPA");
  };
  document.body.appendChild(gravitoSDKTag);
</script>

Now trigger the GTM tag from your website to load the CMP.