## Setup instructions
npm install aesirx-consentFollow the instructions in: https://github.com/aesirxio/analytics-1stparty
#### Usage in SSR site:
1. Download consent-loader.global.js, consent-simple-chunks.zip, translations.zip from https://github.com/aesirxio/consent/releases/latest
2. copy consent-loader.global.js, consent-simple-chunks.zip, translations.zip to your project then unzip it.
3. Add script to :
``
1. (https://example.com is the link to your 1st party server which must be installed)
##### Disable Consent:
`
#### 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
};
export default ConsentContainer;
`
###### Wrap your component in
###### need to using inside 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";
<[YOUR-COMPONENT]/>
`
// 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
1. default (recommend)
1. Support Advance Consent Mode v2
2. simple-consent-mode
1. Support Basic Consent Mode v2
#### Usage in SSR site:
#### In ReactJS:
add this environment variable to
REACT_APP_CONSENT_LAYOUT=default
#### In NextJS:
add this environment variable to
NEXT_PUBLIC_CONSENT_LAYOUT=default
Opt-in Consent
#### Usage in SSR site:
(We also provive option
to replace Analytics Consent with Opt-in Consent)
`
#### 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 (
<>
{
title: 'payment',
content: ,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject
},
]}
/>
);
};
`
(We also provive option to replace Analytics Consent with Opt-in Consent)
To use this in ReactJS please add isOptInReplaceAnalytics to our provider first
`
{children}
{
title: 'payment',
content: ,
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: () => Loading...,
ssr: false,
}
);const ConsentComponent = () => {
const [showModal, setShowModal] = useState(false);
const handleOpen = () => {
setShowModal(true);
};
const handleConsent = () => {
setShowModal(false);
};
const handleReject = () => {
setShowModal(false);
};
return (
<>
{
title: 'payment',
content:
,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject
},
]}
/>
);
};
`
(We also provive option to replace Analytics Consent with Opt-in Consent)
To use this in NextJS please add isOptInReplaceAnalytics to our provider first
`
<[YOUR-COMPONENT]/>
{
title: 'payment',
content: ,
show: showModal,
handleConsent: handleConsent,
handleReject: handleReject,
replaceAnalyticsConsent: "true"
},
]}
/>
``