feat: ⚡️ Add docs and connect Stripe

apps/docs/docs/embed/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Embed",
+  "position": 5
+}

apps/docs/docs/embed/iframe.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 3
+---
+
+# Iframe
+
+You can easily get your typebot iframe code by clicking on the "Iframe" button in the "Share" tab of your typebot.
+
+<img src="/img/embeddings/iframe/iframe-preview.png" width="600" alt="Iframe preview"/>
+
+Here, you can set up its width and height. A good default is a `width` of `100%` and a `height` of `600px`.

apps/docs/docs/embed/javascript-commands.md

@@ -0,0 +1,65 @@
+---
+sidebar_position: 4
+---
+
+# Javascript library
+
+Typebot Javascript library is open-source ([check out the repository](https://github.com/typebot-io/typebot-js)). Feel free to contribute if you're a developer and wish to improve its features.
+
+Whenever a typebot is embedded on your website, you have access to commands to automatically trigger actions on your embedding depending on its type.
+
+## Popup
+
+### Open or Close a popup
+
+You can use these commands:
+
+```js
+Typebot.getPopupActions().open();
+```
+
+```js
+Typebot.getPopupActions().close();
+```
+
+You can bind these commands on a button element, for example:
+
+```html
+<button onclick="Typebot.getPopupActions().open()">Open the popup</button>
+```
+
+## Bubble
+
+### Open or close the proactive message
+
+You can use this command:
+
+```js
+Typebot.getBubbleActions().openProactiveMessage();
+```
+
+You can bind this command on a button element, for example:
+
+```html
+<button onclick="Typebot.getBubbleActions().openProactiveMessage()">
+  Open proactive message
+</button>
+```
+
+### Open or close the typebot
+
+You can use these commands:
+
+```js
+Typebot.getBubbleActions().open();
+```
+
+```js
+Typebot.getBubbleActions().close();
+```
+
+You can bind these commands on a button element, for example:
+
+```html
+<button onclick="Typebot.getBubbleActions().open()">Open the chat</button>
+```

apps/docs/docs/embed/overview.md

@@ -0,0 +1,28 @@
+---
+sidebar_position: 1
+---
+
+# Overview
+
+You can choose to embed your typebot in 3 different ways.
+
+## Standard
+
+Embeds the typebot in a box with the size of your choice. This type is used at the top of [Typebot's homepage](https://www.typebot.io/)
+
+<img src="/img/embeddings/standard.png" alt="Standard"/>
+
+You can also set the width to `100%` and the height to `100vh` to make it take the entire page dimensions
+
+## Popup
+
+Embeds the typebot in a Popup that overlays your website. It can be triggered after a delay or with a click of a button for example
+
+<img src="/img/embeddings/popup.png" alt="Popup"/>
+
+## Bubble
+
+Embeds the typebot as a "chat bubble" at the bottom right corner of your site. Can be triggered automatically or with a click. It can also come with a "proactive message". An example can be found in [Typebot's pricing page](https://www.typebot.io/pricing)
+
+<img src="/img/embeddings/bubble1.png" alt="Bubble 1" width="600px"/>
+<img src="/img/embeddings/bubble2.png" alt="Bubble 2" width="600px"/>

apps/docs/docs/embed/wordpress.md

@@ -0,0 +1,103 @@
+---
+sidebar_position: 2
+---
+
+# WordPress
+
+Typebot has a native [WordPress plug-in](https://wordpress.org/plugins/typebot/) that helps you embed typebots in your WordPress site.
+
+Of course, before using it, you need to create and publish your first typebot.
+
+<img src="/img/embeddings/wordpress-preview.png" width="600" alt="WP plugin preview"/>
+
+You can either choose to configurate an "easy setup" or "advanced setup".
+
+## Easy setup
+
+### Container
+
+When choosing "container" and click on "Save" you can then use a typebot shortcode in your page builder. [Here is a complete tutorial on how to insert a shortcode](https://www.wpbeginner.com/wp-tutorials/how-to-add-a-shortcode-in-wordpress/).
+
+Here is how it looks like:
+
+```text
+[typebot width="100%" height="500px" background-color="#F7F8FF"]
+```
+
+`width`, `height`, `background-color` and `url` are optionnal.
+
+You should use `url` parameter only if you need to embed different typebots as containers on your website.
+
+If your typebot appears to have a small height like this:
+<img src="/img/embeddings/wp-small-container.png" width="600" alt="WP plugin preview"/>
+
+you need to set a fixed `height` in pixel (`500px` or `600px` is usually a great number).
+
+### Popup & Bubble
+
+Fields are self explanatory.
+
+#### Pages to include separated by a comma
+
+With this field, you can tell the plugin to include the typebot only on specific pages.
+
+Example:
+
+- `/my-page,/other-page/*`: the typebot will appear on these pages: `/my-page`, `/other-page`, `/other-page/sub/path`, `/other-page/other/path`
+
+## Advanced setup
+
+This config allows you to directly paste the code from "HTML & Javascript" instructions in the Share page. So that you can set your own logic if needed.
+
+Here is an example for a bubble config:
+
+```html
+<script
+  type="text/javascript"
+  src="https://static.typebot.io/typebot-1.0.0.js"
+></script>
+
+<script>
+  const typebot = Typebot.Chat({
+    publishId: "exemple-lead-gen",
+    buttonColor: "#0042DA",
+    buttonIconUrl: "",
+    loadingColors: {
+      chatBackground: "#00002e",
+      bubbleBackground: "#F7F8FF",
+      typingDots: "#303235",
+    },
+  });
+</script>
+```
+
+## Personalize user experience (Hidden variables)
+
+You can leverage the hidden variables and inject your user information directly into your typebot so that the experience is entirely customized to your user. Here are the available variables from WordPress:
+
+<img src="/img/embeddings/wp-variables.png" alt="WP predefined variables"/>
+
+Then you can use these variables anywhere on your typebot. For more informations, check out the [Hidden variables doc](https://docs.typebot.io/editor/variables/hidden-variables)
+
+## Your typebot isn't showing?
+
+### You have a cache plugin
+
+Plugins like WP Rocket prevent Typebot to work.
+
+For WP Rocket:
+
+1. Go to Settings > WP Rocket > Excluded Inline Javascript:
+
+<img src="/img/embeddings/wp-rocket.png" width="600" alt="WP plugin preview"/>
+
+2. Type "typebot"
+3. Save
+
+### You have plugin that adds `defer` attribute to external scripts
+
+You need to add an exception for Typebot in the corresponding plugin config.
+
+### Still not working
+
+Contact me on the application using the typebot at the bottom right corner

apps/docs/docs/get-started/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Get Started",
+  "position": 1
+}

apps/docs/docs/get-started/overview.md

@@ -0,0 +1,9 @@
+---
+sidebar_position: 2
+---
+
+# Overview
+
+The best way for me to show you Typebot's simplicity is through a product tour video:
+
+<iframe width="900" height="500" src="https://www.youtube.com/embed/u8FZHvlYviw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

apps/docs/docs/get-started/welcome.md

@@ -0,0 +1,14 @@
+---
+sidebar_position: 1
+slug: /
+---
+
+# Welcome
+
+[Typebot](https://www.typebot.io) is a conversational form builder that helps you collect more responses compared to other form builders (Typeform, Google Forms, Tally...).
+
+This is the Typebot documentation. It's a great place to find most answers. Please use the search box in the top right or the navigation menu (soon available) on the left-hand side to find the answers you're looking for.
+
+This documentation is a work in progress.
+
+If you can't find what you're looking for, don't hesitate to contact me directly on the web app or at baptiste@typebot.io.