From c950406997c28dc9aefecbad2aeb58d9b66ccffe Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Tue, 23 May 2023 18:01:49 +0200
Subject: [PATCH] :lipstick: (js) Improve popup ui consistency

---
 apps/docs/docs/embed/webflow.md               | 24 +++++++++++++++----
 packages/embeds/js/package.json               |  2 +-
 .../src/features/popup/components/Popup.tsx   | 15 +++++++++---
 packages/embeds/react/package.json            |  2 +-
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/apps/docs/docs/embed/webflow.md b/apps/docs/docs/embed/webflow.md
index 6b61aeb6d..dd913b346 100644
--- a/apps/docs/docs/embed/webflow.md
+++ b/apps/docs/docs/embed/webflow.md
@@ -7,7 +7,18 @@ Head over to the Share tab of your bot and click on the Webflow button to get th
 ### Trigger a typebot command on a click of a button
 
 1. Head over to the `Settings` tab of your button and add a dedicated `ID`
-2. In your typebot `Embed` element, insert this code in the existing `<script>` tag. It should look like:
+2. In your typebot `Embed` element, insert this code in the existing `<script>` tag:
+
+```js
+document.getElementById('BUTTON_ID').addEventListener('click', (event) => {
+  event.preventDefault()
+  Typebot.open()
+})
+```
+
+You can add as many as you'd like if you need to open the bot on several button clicks
+
+It should look like:
 
 ```html
 <script type="module">
@@ -17,13 +28,18 @@ Head over to the Share tab of your bot and click on the Webflow button to get th
     typebot: 'my-typebot',
   })
 
-  document.getElementById('<MY_ID>').addEventListener('click', (event) => {
+  document.getElementById('BUTTON_ID_1').addEventListener('click', (event) => {
+    event.preventDefault()
+    Typebot.open()
+  })
+
+  document.getElementById('BUTTON_ID_2').addEventListener('click', (event) => {
     event.preventDefault()
     Typebot.open()
   })
 </script>
 ```
 
-Make sure to replace `<MY_ID>` with the ID you added on your button element.
+Make sure to replace `BUTTON_ID_1` and `BUTTON_ID_2` with the ID you added on your button elements.
 
-In this example we are opening the popup when the button is clicked but you could also use any of the [available commands](./commands).
+In this example we are opening the popup when the specified buttons are clicked but you could also use any of the [available commands](./commands).
diff --git a/packages/embeds/js/package.json b/packages/embeds/js/package.json
index d4a2df3a1..74f9be421 100644
--- a/packages/embeds/js/package.json
+++ b/packages/embeds/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",
diff --git a/packages/embeds/js/src/features/popup/components/Popup.tsx b/packages/embeds/js/src/features/popup/components/Popup.tsx
index fd42cc3f4..2467e2c55 100644
--- a/packages/embeds/js/src/features/popup/components/Popup.tsx
+++ b/packages/embeds/js/src/features/popup/components/Popup.tsx
@@ -107,17 +107,26 @@ export const Popup = (props: PopupProps) => {
     <Show when={isBotOpened()}>
       <style>{styles}</style>
       <div
-        class="relative z-10"
+        class="relative"
         aria-labelledby="modal-title"
         role="dialog"
         aria-modal="true"
+        style={{
+          'z-index': 42424242,
+        }}
       >
         <style>{styles}</style>
-        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity animate-fade-in" />
+        <div
+          class="fixed inset-0 bg-black bg-opacity-50 transition-opacity animate-fade-in"
+          part="overlay"
+        />
         <div class="fixed inset-0 z-10 overflow-y-auto">
           <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <div
-              class="relative h-[80vh] transform overflow-hidden rounded-lg text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
+              class={
+                'relative h-[80vh] transform overflow-hidden rounded-lg text-left transition-all sm:my-8 sm:w-full sm:max-w-lg' +
+                (props.theme?.backgroundColor ? ' shadow-xl' : '')
+              }
               style={{
                 'background-color':
                   props.theme?.backgroundColor ?? 'transparent',
diff --git a/packages/embeds/react/package.json b/packages/embeds/react/package.json
index 1a57bc38e..eee40df2a 100644
--- a/packages/embeds/react/package.json
+++ b/packages/embeds/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.0.53",
+  "version": "0.0.54",
   "description": "React library to display typebots on your website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",