aesirx-analytics 2.0.1 → 2.1.1

package/README.md

@@ -22,7 +22,6 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
 <script>
   window.aesirx1stparty = "https://example.com"
   window.aesirxClientID="[REPLACE THIS WITH THE PROVIDED CLIENT_ID]"
-  window.aesirxClientSecret="[REPLACE THIS WITH THE PROVIDED CLIENT_SECRET]"
 </script>
 <script async defer src="YOUR_PROJECT_PATH/analytics.js"></script>
 ```
@@ -47,11 +46,9 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
 ```
 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://sso.aesirx.io/
-`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` from https://sso.aesirx.io/
 ```
 
 ##### Disable Consent Popup:
@@ -90,11 +87,9 @@ export default AnalyticsContainer;
 ```
 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://sso.aesirx.io/
-`CLIENT_SECRET` replace this with the provided `CLIENT_SECRET` from https://sso.aesirx.io/
 ```
 
 ##### Disable Consent Popup:
@@ -238,3 +233,45 @@ const CustomEvent = () => {
 (`endPoint` is the link to your 1st party server which must be installed)
 
 (`referer` is the referer domain)
+
+## 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;
+  }
+```