aesirx-consent

v1.9.1

Published

2 days ago

## Setup instructions

0High
0Medium
0Low

aesirx

AesirX Consent Management Platform

Setup instructions

Setup the 1st party server

Follow the instructions in: https://github.com/aesirxio/analytics-1stparty

Setup AesirX Consent

Usage in SSR site:

Download consent-loader.global.js, consent-simple-chunks.zip, translations.zip from https://github.com/aesirxio/consent/releases/latest
copy consent-loader.global.js, consent-simple-chunks.zip, translations.zip to your project then unzip it.
Add script to <head>:

<script>
  window.aesirx1stparty = "https://example.com"
</script>
<script src="YOUR_PROJECT_PATH/translations/en.js"></script>
<script async defer src="YOUR_PROJECT_PATH/consent-loader.global.js"></script>
<script id="aesirx-consent-loader-js-before">
  window.aesirxConsentConfig = {
    uiEntry: "YOUR_PROJECT_PATH/consent-simple-chunks/consent-simple.js"
  };
</script>

<link rel="stylesheet" id="aesirx-consent-css" href="YOUR_PROJECT_PATH/consent-simple-chunks/consent-simple.css" media="all">

(https://example.com is the link to your 1st party server which must be installed)

Disable Consent:

<script>
  window.disableAnalyticsConsent = "true"
</script>

Usage in ReactJS

npm i aesirx-consent

Add the environment variable file (`.env`)

REACT_APP_ENDPOINT_ANALYTICS_URL=https://example.com
REACT_APP_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID]
REACT_APP_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]

(https://example.com is the link to your 1st party server)
`CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/

Disable Consent Popup:

add this environment variable to .env

REACT_APP_DISABLE_ANALYTICS_CONSENT=true

With react-router-dom v5:

Create ConsentContainer component:

import React from 'react';
import { ConsentReact } from 'aesirx-consent';
const ConsentContainer = ({children}) => {
  return <ConsentReact>{children}</ConsentReact>;
};

export default ConsentContainer;

Wrap your component in `<ConsentContainer><[YOUR-COMPONENT]/></ConsentContainer>`

`<ConsentContainer>` need to using inside `<Router>` component

Usage in NextJS

npm i aesirx-consent

Add the environment variable file (`.env`)

NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL=https://example.com
NEXT_PUBLIC_SSO_CLIENT_ID=[REPLACE THIS WITH THE PROVIDED CLIENT_ID]
NEXT_PUBLIC_SSO_CLIENT_SECRET=[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]

(https://example.com is the link to your 1st party server)
`CLIENT_ID` replace this with the provided `CLIENT_ID` from https://dapp.shield.aesirx.io/
`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` fromhttps://dapp.shield.aesirx.io/

Disable Consent Popup:

add this environment variable to .env

NEXT_PUBLIC_DISABLE_ANALYTICS_CONSENT=true

With next/router:

Added in app.js:

import { ConsentNext } from "aesirx-consent";

<ConsentNext>
  <[YOUR-COMPONENT]/>
</ConsentNext>

Customize CSS for Consent modal

Please follow below CSS example:

  // Customize toast
  .aesirxconsent .toast {
    --aesirxconsent-toast-font-size: 16px;
    --aesirxconsent-toast-padding-x: 0.75rem;
    --aesirxconsent-toast-padding-y: 0.5rem;
    --aesirxconsent-toast-spacing: 1.5rem;
    --aesirxconsent-toast-zindex: 1049;
  }
  // Customize button
  .aesirxconsent .btn {
    --aesirxconsent-btn-font-size: 16px;
    --aesirxconsent-btn-padding-x: 0.75rem;
    --aesirxconsent-btn-padding-y: 0.375rem;
    --aesirxconsent-btn-font-weight: 400;
    --aesirxconsent-btn-line-height: 1.5;
  }
  // Customize button success
  .aesirxconsent .btn-success {
    --aesirxconsent-btn-color: #000;
    --aesirxconsent-btn-bg: #1ab394;
    --aesirxconsent-btn-border-color: #1ab394;
    --aesirxconsent-btn-hover-color: #000;
    --aesirxconsent-btn-hover-bg: #3cbea4;
    --aesirxconsent-btn-hover-border-color: #31bb9f;
    --aesirxconsent-btn-focus-shadow-rgb: 22, 152, 126;
    --aesirxconsent-btn-active-color: #000;
    --aesirxconsent-btn-active-bg: #48c2a9;
    --aesirxconsent-btn-active-border-color: #31bb9f;
    --aesirxconsent-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --aesirxconsent-btn-disabled-color: #000;
    --aesirxconsent-btn-disabled-bg: #1ab394;
    --aesirxconsent-btn-disabled-border-color: #1ab394;
  }
  // To customize CSS for dark mode (Bootstrap dark mode)
  [data-bs-theme=dark] .aesirxconsent {
    color: #fff;
  }

Choose template for Consent modal

There is 5 template for Consent modal

default (recommend)
1. Support Advance Consent Mode v2
simple-consent-mode
1. Support Basic Consent Mode v2

Usage in SSR site:

<script>
  window.consentLayout = "default"
</script>

In ReactJS:

add this environment variable to .env

REACT_APP_CONSENT_LAYOUT=default

In NextJS:

add this environment variable to .env

NEXT_PUBLIC_CONSENT_LAYOUT=default

Opt-in Consent

Usage in SSR site:

<script>
   window.optInConsentData = `[
      {
        "title":"payment",
        "content":"<div>YOUR_CONTENT_INPUT_HERE</div>"
      }
    ]`;

    //trigger open optIn consent with Javascript
    document.querySelector('.opt-in-consent.payment').classList.add('show');
</script>

(We also provive option replaceAnalyticsConsent to replace Analytics Consent with Opt-in Consent)

<script>
   window.optInConsentData = `[
      {
        "title":"payment",
        "content":"<div>YOUR_CONTENT_INPUT_HERE</div>",
        "replaceAnalyticsConsent": "true"
      }
    ]`
</script>

In ReactJS:

const OptInConsent = React.lazy(
  () => import('./OptInConsent').then(module => ({ default: module.OptInConsent }))
);
const ConsentComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const handleOpen = () => {
    setShowModal(true);
  };
   const handleConsent = () => {
    setShowModal(false);
  };
  const handleReject = () => {
    setShowModal(false);
  };
  return (
    <>
      <OptInConsent
        optInConsentData={[
          {
            title: 'payment',
            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
            show: showModal,
            handleConsent: handleConsent,
            handleReject: handleReject
          },
        ]}
      />
    </>
  );
};

(We also provive option replaceAnalyticsConsent to replace Analytics Consent with Opt-in Consent) To use this in ReactJS please add isOptInReplaceAnalytics to our provider first

<ConsentReact location={location} history={history} isOptInReplaceAnalytics={true}>
  {children}
</ConsentReact>

<OptInConsent
  optInConsentData={[
    {
      title: 'payment',
      content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
      show: showModal,
      handleConsent: handleConsent,
      handleReject: handleReject,
      replaceAnalyticsConsent: "true"
    },
  ]}
/>

In NextJS:

import dynamic from "next/dynamic";
const OptInConsent = dynamic(
  () => import("aesirx-analytics").then((module) => module.OptInConsent),
  {
    loading: () => <div>Loading...</div>,
    ssr: false,
  }
);

const ConsentComponent = () => {
  const [showModal, setShowModal] = useState(false);
  const handleOpen = () => {
    setShowModal(true);
  };
  const handleConsent = () => {
    setShowModal(false);
  };
  const handleReject = () => {
    setShowModal(false);
  };
  return (
    <>
      <OptInConsent
        optInConsentData={[
          {
            title: 'payment',
            content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
            show: showModal,
            handleConsent: handleConsent,
            handleReject: handleReject
          },
        ]}
      />
    </>
  );
};

(We also provive option replaceAnalyticsConsent to replace Analytics Consent with Opt-in Consent) To use this in NextJS please add isOptInReplaceAnalytics to our provider first

<ConsentNext router={useRouter()} isOptInReplaceAnalytics={true}>
  <[YOUR-COMPONENT]/>
</ConsentNext>

<OptInConsent
  optInConsentData={[
    {
      title: 'payment',
      content: `<div>YOUR_CONTENT_INPUT_HERE</div>`,
      show: showModal,
      handleConsent: handleConsent,
      handleReject: handleReject,
      replaceAnalyticsConsent: "true"
    },
  ]}
/>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

AesirX Consent Management Platform

Setup instructions

Setup the 1st party server

Setup AesirX Consent

Usage in SSR site:

Disable Consent:

Usage in ReactJS

Add the environment variable file (.env)

Disable Consent Popup:

With react-router-dom v5:

Wrap your component in <ConsentContainer><[YOUR-COMPONENT]/></ConsentContainer>

<ConsentContainer> need to using inside <Router> component

Usage in NextJS

Add the environment variable file (.env)

Disable Consent Popup:

With next/router:

Customize CSS for Consent modal

Choose template for Consent modal

Usage in SSR site:

In ReactJS:

In NextJS:

Opt-in Consent

Usage in SSR site:

In ReactJS:

In NextJS:

Add the environment variable file (`.env`)

Wrap your component in `<ConsentContainer><[YOUR-COMPONENT]/></ConsentContainer>`

`<ConsentContainer>` need to using inside `<Router>` component

Add the environment variable file (`.env`)