From a4e3f4bf9c072ba0af1be1d32b1f818c21f7c2c4 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 21 Feb 2023 16:22:25 +0100
Subject: [PATCH] :pencil: Add appropriate docs for new @typebot.io libs

---
 .../BubbleSettings/BubbleSettings.tsx         |   8 +-
 apps/docs/docs/embed/html-javascript.md       |  43 +++--
 apps/docs/docs/embed/react.md                 | 152 ++++++++++++++++
 packages/js/README.md                         | 169 ++++++++++++++++++
 packages/react/README.md                      | 144 +++++++++++++++
 packages/typebot-js/README.md                 |   2 +
 6 files changed, 500 insertions(+), 18 deletions(-)
 create mode 100644 apps/docs/docs/embed/react.md
 create mode 100644 packages/js/README.md
 create mode 100644 packages/react/README.md

diff --git a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx
index c04a0d0ef..dc4feec17 100644
--- a/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx
+++ b/apps/builder/src/features/publish/components/embeds/settings/BubbleSettings/BubbleSettings.tsx
@@ -24,7 +24,13 @@ export const BubbleSettings = ({
   const updatePreviewMessage = (
     previewMessage: BubbleProps['previewMessage']
   ) => {
-    onPreviewMessageChange(previewMessage)
+    if (!previewMessage) return onPreviewMessageChange(undefined)
+    onPreviewMessageChange({
+      ...previewMessage,
+      autoShowDelay: previewMessage?.autoShowDelay
+        ? previewMessage.autoShowDelay * 1000
+        : undefined,
+    })
   }
 
   const updateTheme = (theme: BubbleProps['theme']) => {
diff --git a/apps/docs/docs/embed/html-javascript.md b/apps/docs/docs/embed/html-javascript.md
index bd864ebeb..1e7f2d434 100644
--- a/apps/docs/docs/embed/html-javascript.md
+++ b/apps/docs/docs/embed/html-javascript.md
@@ -11,13 +11,15 @@ You can get the standard HTML and Javascript code by clicking on the "HTML & Jav
 There, you can change the container dimensions. Here is a code example:
 
 ```html
-<script src="https://unpkg.com/typebot-js@2.2"></script>
-<typebot-standard style="width: 100%; height: 600px;"></typebot-standard>
-<script>
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
   Typebot.initStandard({
     typebot: 'my-typebot',
   })
 </script>
+
+<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
 ```
 
 This code is creating a container with a 100% width (will match parent width) and 600px height.
@@ -29,11 +31,13 @@ You can get the popup HTML and Javascript code by clicking on the "HTML & Javasc
 Here is an example:
 
 ```html
-<script src="https://unpkg.com/typebot-js@2.2"></script>
-<script>
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
   Typebot.initPopup({
     typebot: 'my-typebot',
-    autoShowDelay: 2000,
+    apiHost: 'http://localhost:3001',
+    autoShowDelay: 3000,
   })
 </script>
 ```
@@ -69,32 +73,37 @@ You can get the bubble HTML and Javascript code by clicking on the "HTML & Javas
 Here is an example:
 
 ```html
-<script src="https://unpkg.com/typebot-js@2.2"></script>
-<script>
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
   Typebot.initBubble({
     typebot: 'my-typebot',
+    previewMessage: {
+      message: 'I have a question for you!',
+      autoShowDelay: 5000,
+      avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+    },
+    theme: {
+      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      chatWindow: { backgroundColor: '#ffffff' },
+    },
   })
 </script>
 ```
 
-This code will automatically trigger the popup window after 3 seconds.
+This code will show the bubble and let a preview message appear after 5 seconds.
 
 ### Open or close the preview message
 
 You can use these commands:
 
 ```js
-Typebot.showMessage()
+Typebot.showPreviewMessage()
 ```
 
 ```js
-Typebot.hideMessage()
-```
-
-You can bind this command on a button element, for example:
-
-```html
-<button onclick="Typebot.showMessage()">Open message</button>
+Typebot.hidePreviewMessage()
 ```
 
 ### Open or close the typebot
diff --git a/apps/docs/docs/embed/react.md b/apps/docs/docs/embed/react.md
new file mode 100644
index 000000000..83fbfee7c
--- /dev/null
+++ b/apps/docs/docs/embed/react.md
@@ -0,0 +1,152 @@
+---
+sidebar_position: 5
+---
+
+# React
+
+## Install
+
+Make sure you install both `@typebot.io/js` and `@typebot.io/react` first.
+
+```bash
+npm install @typebot.io/js @typebot.io/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+    />
+  )
+}
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from '@typebot.io/react'
+
+const App = () => {
+  return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
+}
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Bubble
+      typebot="lead-generation-copy-3luzm6b"
+      previewMessage={{
+        message: 'I have a question for you!',
+        autoShowDelay: 5000,
+        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+      }}
+      theme={{
+        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      }}
+    />
+  )
+}
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from '@typebot.io/react'
+
+Typebot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@typebot.io/react'
+
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+      prefilledVariables={{
+        'Current URL': 'https://my-site/account',
+        'User name': 'John Doe',
+      }}
+    />
+  )
+}
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.
diff --git a/packages/js/README.md b/packages/js/README.md
new file mode 100644
index 000000000..526bd5e38
--- /dev/null
+++ b/packages/js/README.md
@@ -0,0 +1,169 @@
+# Typebot JS library
+
+Frontend library to embed typebots from [Typebot](https://www.typebot.io/).
+
+## Installation
+
+### Using npm
+
+To install, simply run:
+
+```bash
+npm install @typebot.io/js
+```
+
+### Directly in your HTML
+
+```
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js/dist/web.js'
+
+  Typebot.initStandard({
+    typebot: 'my-typebot',
+  })
+</script>
+
+<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
+```
+
+## Standard
+
+You can get the standard HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
+
+There, you can change the container dimensions. Here is a code example:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
+  Typebot.initStandard({
+    typebot: 'my-typebot',
+  })
+</script>
+
+<typebot-standard style="width: 100%; height: 600px; "></typebot-standard>
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+You can get the popup HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
+
+Here is an example:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
+  Typebot.initPopup({
+    typebot: 'my-typebot',
+    apiHost: 'http://localhost:3001',
+    autoShowDelay: 3000,
+  })
+</script>
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+Typebot.open()
+```
+
+```js
+Typebot.close()
+```
+
+```js
+Typebot.toggle()
+```
+
+You can bind these commands on a button element, for example:
+
+```html
+<button onclick="Typebot.open()">Contact us</button>
+```
+
+## Bubble
+
+You can get the bubble HTML and Javascript code by clicking on the "HTML & Javascript" button in the "Share" tab of your typebot.
+
+Here is an example:
+
+```html
+<script type="module">
+  import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.0.9/dist/web.js'
+
+  Typebot.initBubble({
+    typebot: 'my-typebot',
+    previewMessage: {
+      message: 'I have a question for you!',
+      autoShowDelay: 5000,
+      avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+    },
+    theme: {
+      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      chatWindow: { backgroundColor: '#ffffff' },
+    },
+  })
+</script>
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+Typebot.showPreviewMessage()
+```
+
+```js
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the typebot
+
+You can use these commands:
+
+```js
+Typebot.open()
+```
+
+```js
+Typebot.close()
+```
+
+```js
+Typebot.toggle()
+```
+
+You can bind these commands on a button element, for example:
+
+```html
+<button onclick="Typebot.open()">Contact us</button>
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```js
+Typebot.initStandard({
+  typebot: 'my-typebot',
+  prefilledVariables: {
+    'Current URL': 'https://my-site/account',
+    'User name': 'John Doe',
+  },
+})
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.
diff --git a/packages/react/README.md b/packages/react/README.md
new file mode 100644
index 000000000..61091eab2
--- /dev/null
+++ b/packages/react/README.md
@@ -0,0 +1,144 @@
+## Install
+
+```bash
+npm install @typebot.io/js @typebot.io/react
+```
+
+## Standard
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+    />
+  )
+}
+```
+
+This code is creating a container with a 100% width (will match parent width) and 600px height.
+
+## Popup
+
+```tsx
+import { Popup } from '@typebot.io/react'
+
+const App = () => {
+  return <Popup typebot="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
+}
+```
+
+This code will automatically trigger the popup window after 3 seconds.
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Bubble
+
+```tsx
+import { Bubble } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Bubble
+      typebot="lead-generation-copy-3luzm6b"
+      previewMessage={{
+        message: 'I have a question for you!',
+        autoShowDelay: 5000,
+        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
+      }}
+      theme={{
+        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
+        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
+      }}
+    />
+  )
+}
+```
+
+This code will show the bubble and let a preview message appear after 5 seconds.
+
+### Open or close the preview message
+
+You can use these commands:
+
+```js
+import { showPreviewMessage } from '@typebot.io/react'
+
+Typebot.showPreviewMessage()
+```
+
+```js
+import { hidePreviewMessage } from '@typebot.io/react'
+
+Typebot.hidePreviewMessage()
+```
+
+### Open or close the chat window
+
+You can use these commands:
+
+```js
+import { open } from '@typebot.io/react'
+
+open()
+```
+
+```js
+import { close } from '@typebot.io/react'
+
+close()
+```
+
+```js
+import { toggle } from '@typebot.io/react'
+
+toggle()
+```
+
+## Additional configuration
+
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
+
+```tsx
+import { Standard } from '@typebot.io/react'
+
+const App = () => {
+  return (
+    <Standard
+      typebot="lead-generation-copy-3luzm6b"
+      style={{ width: '100%', height: '600px' }}
+      prefilledVariables={{
+        'Current URL': 'https://my-site/account',
+        'User name': 'John Doe',
+      }}
+    />
+  )
+}
+```
+
+It will prefill the `Current URL` variable with "https://my-site/account" and the `User name` variable with "John Doe". More info about variables: [here](/editor/variables).
+
+Note that if your site URL contains query params (i.e. https://typebot.io?User%20name=John%20Doe), the variables will automatically be injected to the typebot. So you don't need to manually transfer query params to the bot embed configuration.
diff --git a/packages/typebot-js/README.md b/packages/typebot-js/README.md
index 218b390fd..5e524bd7a 100644
--- a/packages/typebot-js/README.md
+++ b/packages/typebot-js/README.md
@@ -1,3 +1,5 @@
+> ⚠️ This library is deprecated in favor of [`@typebot.io/js`](https://www.npmjs.com/package/@typebot.io/js) and [`@typebot.io/react`](https://www.npmjs.com/package/@typebot.io/react)
+
 # Typebot JS library
 
 Frontend library to embed typebots from [Typebot](https://www.typebot.io/).