DOCS-543 - Berry widget demo env

.github/workflows/pr.yml

@@ -9,29 +9,20 @@ on:
         - checks_requested
 
 jobs:
-    build-and-deploy:
-      runs-on: ubuntu-22.04
-      env:
-          CI: true
-          NODE_ENV: production
-      steps:
-        - uses: actions/checkout@v4
-        - name: Set up Node.js
-          uses: actions/setup-node@v3
-          with:
-            node-version: '20.x'
-            cache: 'yarn'
-        - name: Docusaurus Webpack cache
-          uses: actions/cache@v3
-          with:
-            path: node_modules/.cache
-            key: ${{ runner.os }}-webpack-cache
-        - name: Install dependencies
-          run: yarn install --frozen-lockfile
-        - name: Build the Docusaurus site
-          env:
-            NODE_OPTIONS: "--max-old-space-size=8192 --max-http-header-size=8192"
-          run: yarn build
+    deploy-to-review:
+    uses: SumoLogic/sumologic-documentation/.github/workflows/build_and_deploy.yml@main
+    with:
+      hostname: https://d2t1s0ah22jxsa.cloudfront.net
+      base_url: /${{ github.ref_name }}/
+      environment: review/${{ github.ref_name }}
+    secrets:
+      S3_BUCKET_NAME: ${{ secrets.REVIEW_S3_BUCKET_NAME }}
+      CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.REVIEW_CLOUDFRONT_DISTRIBUTION_ID }}
+      AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+      AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+  spellcheck:
+    runs-on: ubuntu-latest
+    steps:
     spellcheck:
       runs-on: ubuntu-latest
       steps:

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import Layout from '@theme/Layout';
 import { Box, Button, Container, Grid, Stack, Tab, Tabs, Typography } from '@mui/material';
 import { TabContext, TabPanel } from '@mui/lab';
@@ -12,6 +12,29 @@ import ErrorBoundary from '../components/ErrorBoundary'; // Import the ErrorBoun
 export const Home = () => {
   const [tab, setTab] = useState('0');
 
+  useEffect(() => {
+    // Load the Berry widget script only if it hasn’t already been loaded
+    if (!document.getElementById('berry-widget-script')) {
+      const script = document.createElement('script');
+      script.id = 'berry-widget-script';
+      script.type = 'text/javascript';
+      script.src = 'https://www.berryapp.io/js/berry-widget.min.js';
+      document.head.appendChild(script);
+
+      script.onload = () => {
+        const widgetJwt = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE3MjU5NDg5MTcsImV4cCI6MTc0MTYwODkxNywiYXVkIjoiV2lkZ2V0SW5pdGlhbGl6YXRpb24iLCJvcmdhbml6YXRpb25JZCI6NjN9.oJEGkGq1q3uFD66J916f_ZBrqQjPHP9orUOKFxInG38';
+        window.Berry.init({
+          token: widgetJwt,
+          primaryColor: '#021b9a',
+          position: { side: 'right', offsetX: 25, offsetY: 100 },
+          isOpenByDefault: false,
+          botUrlPath: 'nova',
+          showNewChat: true,
+        });
+      };
+    }
+  }, []);
+
   return (
     <ErrorBoundary>
       <Layout