✨ Introduce bot v2 in builder (#328)

Also, the new engine is the default for updated typebots for viewer

Closes #211

apps/docs/docs/editor/blocks/logic/set-variable.md

@@ -93,7 +93,7 @@ window.location.href
 
 :::caution
 It will not give you the parent URL if you embed the bot on your site.
-A more bulletproof option is to pass the URL as a hidden variable in the embed code options. You can find an example [here](/embed/html-javascript#additional-configuration).
+A more bulletproof option is to pass the URL as a prefilled variable in the embed code options. You can find an example [here](/embed/html-javascript#additional-configuration).
 :::
 
 ## Extract a cookie

apps/docs/docs/editor/variables.mdx

@@ -34,12 +34,12 @@ Then the variables will be prefilled as following:
 - Email => test@test.com
 - First name => John
 
-Prefilling variables using the embed library is even easier. You need to add an object named `hiddenVariables` that contains a dictionary of your values. For example:
+Prefilling variables using the embed library is even easier. You need to add an object named `prefilledVariables` that contains a dictionary of your values. For example:
 
 ```js
 Typebot.initBubble({
-  url: `https://viewer.typebot.io/typebot-support`,
-  hiddenVariables: {
+  typebot: `my-bot`,
+  prefilledVariables: {
     Email: 'test@test.com',
     'First name': 'John',
   },

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

@@ -12,10 +12,10 @@ There, you can change the container dimensions. Here is a code example:
 
 ```html
 <script src="https://unpkg.com/typebot-js@2.2"></script>
-<div id="typebot-container" style="width: 100%; height: 600px;"></div>
+<typebot-standard style="width: 100%; height: 600px;"></typebot-standard>
 <script>
-  Typebot.initContainer('typebot-container', {
-    url: 'https://viewer.typebot.io/my-typebot',
+  Typebot.initStandard({
+    typebot: 'my-typebot',
   })
 </script>
 ```
@@ -32,8 +32,8 @@ Here is an example:
 <script src="https://unpkg.com/typebot-js@2.2"></script>
 <script>
   Typebot.initPopup({
-    url: 'https://viewer.typebot.io/my-typebot',
-    delay: 3000,
+    typebot: 'my-typebot',
+    autoShowDelay: 2000,
   })
 </script>
 ```
@@ -71,9 +71,8 @@ Here is an example:
 ```html
 <script src="https://unpkg.com/typebot-js@2.2"></script>
 <script>
-  var typebotCommands = Typebot.initPopup({
-    url: 'https://viewer.typebot.io/my-typebot',
-    delay: 3000,
+  Typebot.initBubble({
+    typebot: 'my-typebot',
   })
 </script>
 ```
@@ -122,12 +121,12 @@ You can bind these commands on a button element, for example:
 
 ## Additional configuration
 
-You can add hidden variable values in your embed code by adding the `hiddenVariables` option. Here is an example:
+You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
 
 ```js
-Typebot.initContainer('typebot-container', {
-  url: 'https://viewer.typebot.io/my-typebot',
-  hiddenVariables: {
+Typebot.initStandard({
+  typebot: 'my-typebot',
+  prefilledVariables: {
     'Current URL': 'https://my-site/account',
     'User name': 'John Doe',
   },

apps/docs/docs/embed/wordpress.md

@@ -8,78 +8,19 @@ Typebot has a native [WordPress plug-in](https://wordpress.org/plugins/typebot/)
 
 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"/>
+<img src="/img/embeddings/wordpress-preview.png" 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. To open the popup or the bubble when a button in your site is clicked you can use the [Javascript commands](/embed/html-javascript#open-or-close-a-popup).
-
-#### 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>
-```
+The code snippet to paste is easily configurable in the Share tab of your bot after clicking on the "Wordpress" button.
 
 ## Personalize user experience
 
-You can leverage the [hidden variables](/editor/variables#hidden-variables) and inject your user information directly into your typebot so that the experience is entirely customized to your user.
+You can leverage the [prefilled variables](/editor/variables#prefilled-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, make sure to create them in your typebot's variables dropdown:
 
 <img src="/img/embeddings/wp-variables.png" alt="WP predefined variables" width="400px"/>
 
-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)
+You can use these variables anywhere on your typebot. For more informations, check out the [Prefilled variables doc](https://docs.typebot.io/editor/variables#prefilled-variables)
 
 ## Your typebot isn't showing?