feat: add Alchemer Beacon (#3453)

* feat: add Alchemer Beacon

* feat(alchemer): prevent full width survey

* style: fix lint

* chore: remove Alchemer styles

* feat(alchemer): popup trigger "feedback" tab

* feat(alchemer): popup trigger "feedback" tab

* feat(alchemer): hide "feedback" button after click

* feat(alchemer): style modal

* Revert "feat(alchemer): style modal"

This reverts commit c7b4aac.

* feat(alchemer): style modal

* fix(alchemer): modal width in small viewports

* fix(alchemer): modal width in small viewports

---------

Co-authored-by: Randy <[email protected]>

ARCHITECTURE.md

@@ -31,6 +31,10 @@ We fetch content from [Airtable](https://airtable.com/) during our builds for pr
 
 This content is then stored in JSON files and used to be displayed in the website.
 
+### Alchemer
+
+We use [Alchemer](https://www.alchemer.com/) to get feedback from our visitors.
+
 ### Carbon Web Components
 
 We use web components from the [Carbon Web Components](https://github.com/carbon-design-system/carbon-for-ibm-dotcom) component library.

assets/scss/_alchemer.scss

@@ -0,0 +1,14 @@
+.sg-b-p {
+  box-shadow: 0 0 2rem rgb(0 0 0 / 50%);
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-height: 90vh;
+  max-width: 32rem;
+  width: auto;
+
+  &.sg-b-p-s {
+    left: 5% !important;
+    right: 5% !important;
+  }
+}

assets/scss/main.scss

@@ -3,6 +3,7 @@
 );
 @use "@carbon/styles/scss/reset";
 @use "carbon";
+@use "./_alchemer";
 @use "./_typography";
 @use "./components";
 @include carbon.grid-css-grid;

components/Ui/UiAlchemerSurveyTrigger.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- The ID `alchemer-survey-trigger` is required to trigger the popup -->
+  <bx-btn
+    :id="buttonId"
+    class="ui-alchemer-survey-trigger"
+    size="sm"
+    type="button"
+    @click="hideButton"
+  >
+    <div class="ui-alchemer-survey-trigger__label">Feedback</div>
+  </bx-btn>
+</template>
+
+<script setup lang="ts">
+const buttonId = "alchemer-survey-trigger";
+
+function hideButton() {
+  const button = document.getElementById(buttonId);
+  if (button) {
+    button.style.display = "none";
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@use "~/assets/scss/carbon.scss";
+
+.ui-alchemer-survey-trigger {
+  &::part(button) {
+    padding: carbon.$spacing-04 carbon.$spacing-02;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: rotate(180deg);
+    z-index: 300;
+  }
+
+  &__label {
+    writing-mode: vertical-rl;
+  }
+}
+</style>

layouts/default.vue

@@ -8,6 +8,7 @@
       <slot />
     </main>
     <LayoutFooter />
+    <UiAlchemerSurveyTrigger />
   </div>
 </template>
 

nuxt.config.ts

@@ -34,6 +34,18 @@ export default defineNuxtConfig({
 
   css: ["~/assets/scss/main.scss"],
 
+  app: {
+    head: {
+      script: [
+        // Alchemer Beacon
+        {
+          children: `(function(d,e,j,h,f,c,b){d.SurveyGizmoBeacon=f;d[f]=d[f]||function(){(d[f].q=d[f].q||[]).push(arguments)};c=e.createElement(j),b=e.getElementsByTagName(j)[0];c.async=1;c.src=h;b.parentNode.insertBefore(c,b)})(window,document,'script','//d2bnxibecyz4h5.cloudfront.net/runtimejs/intercept/intercept.js','sg_beacon');sg_beacon('init','MzI0MTk0LTBjOWMxOGI3ZDVkMTg3ZGE0MmQ2ZjNkMTg0NDZjYjkxMTdkNDExMWFkYzQ0ZGIxNGY4');`,
+          body: true,
+        },
+      ],
+    },
+  },
+
   hooks: {
     "build:before": async () => {
       if (IS_PRODUCTION || GENERATE_CONTENT) {