chore: clean up crisp & intercom

Author: harlan-zw

docs/components/content/CrispDemo.vue

@@ -5,7 +5,7 @@ const isLoaded = ref(false)
 <template>
   <div class="not-prose">
     <div class="flex items-center justify-center p-5">
-      <ScriptCrisp id="b1021910-7ace-425a-9ef5-07f49e5ce417" class="crisp">
+      <ScriptCrisp id="b1021910-7ace-425a-9ef5-07f49e5ce417" class="crisp" @ready="isLoaded = true">
         <template #awaitingLoad>
           <div class="crisp-icon" />
         </template>

docs/components/content/IntercomDemo.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const isLoaded = ref(false)
+</script>
+
+<template>
+  <div style="padding: 40px; position: relative;">
+    <ScriptIntercom @ready="isLoaded = true" app-id="akg5rmxb" api-base="https://api-iam.intercom.io" alignment="left" :horizontal-padding="0" class="intercom">
+      <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;">
+        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 28 32"><path d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z" /></svg>
+      </div>
+    </ScriptIntercom>
+    <div class="text-center">
+      <UAlert v-if="!isLoaded" class="mb-5" size="sm" color="blue" variant="soft" title="Click to load" description="Clicking the button to the right will load the Intercom script" />
+      <UAlert v-else color="green" variant="soft" title="Crisp is loaded" description="The Intercom Facade component is no longer being displayed." />
+    </div>
+  </div>
+</template>
+
+<style>
+.intercom {
+  position: relative; /* change to fixed */
+  z-index: 100000;
+  width: 48px;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: #0071b2;
+  filter: drop-shadow(rgba(0, 0, 0, 0.06) 0px 1px 6px) drop-shadow(rgba(0, 0, 0, 0.16) 0px 2px 32px);
+}
+</style>

docs/content/scripts/marketing/intercom.md

@@ -14,13 +14,13 @@ links:
 
 [Crisp](https://crisp.chat/) is a customer messaging platform that lets you communicate with your customers through chat, email, and more.
 
-Nuxt Scripts provides a [useScriptCrisp](#usescriptcrisp) composable and a headless Facade Component [useScriptCrisp](#scriptcrisp) component to interact with the Crisp.
+Nuxt Scripts provides a [useScriptCrisp](#usescriptcrisp) composable and a headless Facade Component [useScriptCrisp](#scriptcrisp) component to interact with crisp.
 
 ## ScriptCrisp
 
 The `ScriptCrisp` component is headless Facade Component wrapping the [useScriptCrisp](#usescriptcrisp) composable, providing a simple, performance optimized way to load Crisp in your Nuxt app.
 
-It's optimized for performance by leveraging the [Element Event Triggers](/docs/guides/script-triggers#element-event-triggers), only loading the Crisp when specific elements events happen.
+It's optimized for performance by leveraging the [Element Event Triggers](/docs/guides/script-triggers#element-event-triggers), only loading crisp when specific elements events happen.
 
 By default, it will load on the `click` DOM event.
 
@@ -48,7 +48,7 @@ const isLoaded = ref(false)
     </ScriptCrisp>
   </div>
   <div class="text-center">
-    <UAlert v-if="!isLoaded" class="mb-5" size="sm" color="blue" variant="soft" title="Click to load" description="Clicking the button to the right will load the Crisp script" />
+    <UAlert v-if="!isLoaded" class="mb-5" size="sm" color="blue" variant="soft" title="Click to load" description="Clicking the button to the right will load crisp script" />
     <UAlert v-else color="green" variant="soft" title="Crisp is loaded" description="The Crisp Facade component is no longer being displayed." />
   </div>
 </div>
@@ -91,18 +91,18 @@ const isLoaded = ref(false)
 
 ### Props
 
-- `trigger`: The trigger event to load the Crisp. Default is `click`. See [Element Event Triggers](/docs/guides/script-triggers#element-event-triggers) for more information.
-- `id`: The Crisp ID.
+- `trigger`: The trigger event to load crisp. Default is `click`. See [Element Event Triggers](/docs/guides/script-triggers#element-event-triggers) for more information.
+- `id`: Crisp ID.
 - `runtimeConfig`: Extra configuration options. Used to configure the locale. Same as CRISP_RUNTIME_CONFIG.
 - `tokenId`: Associated a session, equivalent to using CRISP_TOKEN_ID variable. Same as CRISP_TOKEN_ID.
-- `cookieDomain`: Restrict the domain that the Crisp cookie is set on. Same as CRISP_COOKIE_DOMAIN.
+- `cookieDomain`: Restrict the domain that crisp cookie is set on. Same as CRISP_COOKIE_DOMAIN.
 - `cookieExpiry`: The cookie expiry in seconds. Same as CRISP_COOKIE_EXPIRATION.
 
 See the [Config Schema](#config-schema) for full details.
 
 ### Events
 
-The `ScriptCrisp` component emits a single `ready` event when the Crisp is loaded.
+The `ScriptCrisp` component emits a single `ready` event when crisp is loaded.
 
 ```ts
 const emits = defineEmits<{
@@ -147,11 +147,11 @@ The component provides minimal UI by default, only enough to be functional and a
 
 The default slot is used to display content that will always be visible.
 
-Tip: It's best to leave this empty as the Crisp replaces this component in its own component.
+Tip: It's best to leave this empty as crisp replaces this component in its own component.
 
 **awaitingLoad**
 
-The slot is used to display content while the Crisp is loading.
+The slot is used to display content while crisp is loading.
 
 ```vue
 <template>
@@ -167,7 +167,7 @@ The slot is used to display content while the Crisp is loading.
 
 **loading**
 
-The slot is used to display content while the Crisp is loading.
+The slot is used to display content while crisp is loading.
 
 Tip: You should use the `ScriptLoadingIndicator` by default for accessibility and UX.
 
@@ -185,7 +185,7 @@ Tip: You should use the `ScriptLoadingIndicator` by default for accessibility an
 
 ## useScriptCrisp
 
-The `useScriptCrisp` composable lets you have fine-grain control over the Crisp SDK. It provides a way to load the Crisp SDK and interact with it programmatically.
+The `useScriptCrisp` composable lets you have fine-grain control over Crisp SDK. It provides a way to load crisp SDK and interact with it programmatically.
 
 ```ts
 export function useScriptCrisp<T extends CrispApi>(_options?: CrispInput) {}
@@ -198,7 +198,7 @@ Please follow the [Registry Scripts](/docs/guides/registry-scripts) guide to lea
 ```ts
 export const CrispOptions = object({
   /**
-   * The Crisp ID.
+   * Crisp ID.
    */
   id: string(),
   /**
@@ -216,7 +216,7 @@ export const CrispOptions = object({
    */
   tokenId: optional(string()),
   /**
-   * Restrict the domain that the Crisp cookie is set on.
+   * Restrict the domain that crisp cookie is set on.
    * Same as CRISP_COOKIE_DOMAIN.
    * @see https://docs.crisp.chat/guides/chatbox-sdks/web-sdk/cookie-policies/
    */