fix: make images responsive

2026-04-22 11:29:22 -05:00 · 2023-08-24 16:53:25 +05:30
parent eea7fbbb5c
commit 0a5d458b96
22 changed files with 548 additions and 134 deletions
@@ -21,10 +21,15 @@ The API requests are authorized with a personal API key. This API key gives you

 1. Go to your settings on [app.formbricks.com](https://app.formbricks.com).
 2. Go to page “API keys”
-   <Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg" />
+   <Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
 3. Create a key for the development or production environment.
 4. Copy the key immediately. You won’t be able to see it again.
-   <Image src={ApiKeySecret} alt="API Key Secret" quality="100" className="rounded-lg" />
+   <Image
+     src={ApiKeySecret}
+     alt="API Key Secret"
+     quality="100"
+     className="rounded-lg max-w-full sm:max-w-3xl"
+   />

 <Note>
  ## Store API key safely {{ class: "text-white" }}
@@ -56,13 +56,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Click on "Create Survey" and choose the template “Churn Survey”:

-<Image src={CreateChurnFlow} alt="Create churn survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateChurnFlow}
+  alt="Create churn survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update questions (if you like)

 You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊

-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 _Want to change the button color? You can do so in the product settings._

@@ -78,15 +88,30 @@ To create the trigger for your Churn Survey, you have two options to choose from

 1. **Trigger by innerText:** You likely have a “Cancel Subscription” button in your app. You can setup a user Action with the according `innerText` to trigger the survey, like so:

-<Image src={TriggerInnerText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
+<Image
+  src={TriggerInnerText}
+  alt="Set the trigger by inner Text"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 2. **Trigger by CSS Selector:** In case you have more than one button saying “Cancel Subscription” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“cancel-subscription”` and set your user action up like so:

-<Image src={TriggerCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
+<Image
+  src={TriggerCSS}
+  alt="Set the trigger by CSS Selector"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 3. **Trigger by pageURL:** Lastly, you could also display your survey on a subpage “/subscription-cancelled” where you forward users once they cancelled the trial subscription. You can then create a user Action with the type `pageURL` with the following settings:

-<Image src={TriggerPageUrl} alt="Set the trigger by page URL" quality="100" className="rounded-lg" />
+<Image
+  src={TriggerPageUrl}
+  alt="Set the trigger by page URL"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅

@@ -101,19 +126,34 @@ Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/a

 ### 5. Select Action in the “When to ask” card

-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 6. Last step: Set Recontact Options correctly

 Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you milk these super valuable insights. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 These settings make sure the survey is always displayed, when a user wants to Cancel their subscription.

 ### 7. Congrats! You’re ready to publish your survey 💃

-<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image
+  src={PublishSurvey}
+  alt="Publish survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 <Note>
  ## Formbricks Widget running? {{ class: "text-white" }}
@@ -44,15 +44,30 @@ To get this running, you'll need a bit of time. Here are the steps we're going t

 2. In the Menu (top right) you see that you can switch between a “Development” and a “Production” environment. These are two separate environments so your test data doesn’t mess up the insights from prod. Switch to “Development”:

-<Image src={SwitchToDev} alt="switch to dev environment" quality="100" className="rounded-lg" />
+<Image
+  src={SwitchToDev}
+  alt="switch to dev environment"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 3. Then, create a survey using the template “Docs Feedback”:

-<Image src={DocsTemplate} alt="select docs template" quality="100" className="rounded-lg" />
+<Image
+  src={DocsTemplate}
+  alt="select docs template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉

-<Image src={ChangeId} alt="switch to dev environment" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeId}
+  alt="switch to dev environment"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.

@@ -64,15 +79,31 @@ To get this running, you'll need a bit of time. Here are the steps we're going t

 6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:

-<Image src={WhenToAsk} alt="set up when to ask card" quality="100" className="rounded-lg" />
+<Image
+  src={WhenToAsk}
+  alt="set up when to ask card"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:

-<Image src={AddAction} alt="add action" quality="100" className="rounded-lg" className="rounded" />
+<Image
+  src={AddAction}
+  alt="add action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="rounded"
+/>

 8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝

-<Image src={SelectNonevent} alt="select nonevent" quality="100" className="rounded-lg" />
+<Image
+  src={SelectNonevent}
+  alt="select nonevent"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 **You’re all setup in Formbricks Cloud for now 👍**

@@ -97,7 +128,13 @@ This allows us to capture and analyze partial feedback where the user is not wil

 2. Likely, you have a template file or similar which renders the navigation at the bottom of the page:

-<Image src={DocsNavi} alt="doc navigation" quality="100" className="rounded-lg" className="rounded" />
+<Image
+  src={DocsNavi}
+  alt="doc navigation"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+  className="rounded"
+/>

 Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.

@@ -374,7 +411,7 @@ Before you roll it out in production, you want to test it. To do so, you need tw

 When you are on the survey detail page, you’ll find both of them in the URL:

-<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg" />
+<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:

@@ -53,13 +53,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Click on "Create Survey" and choose the template “Feature Chaser”:

-<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateSurvey}
+  alt="Create survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update questions

 The questions you want to ask are dependent on your feature and can be very specific. In the template, we suggest a high-level check on how easy it was for the user to achieve their goal. We also add an opportunity to provide context:

-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Save, and move over to where the magic happens: The “Audience” tab.

@@ -73,27 +83,47 @@ There are two ways to track a button:

 1. **Trigger by innerText:** You might have a button with a unique text at the end of your feature e.g. "Export Report". You can setup a user Action with the according `innerText` to trigger the survey, like so:

-<Image src={ActionText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
+<Image
+  src={ActionText}
+  alt="Set the trigger by inner Text"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 2. **Trigger by CSS Selector:** In case you have more than one button saying “Export Report” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“export-report-featurename”` and set your user action up like so:

-<Image src={ActionCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
+<Image
+  src={ActionCSS}
+  alt="Set the trigger by CSS Selector"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Please follow our [Actions manual](/docs/actions/why) for an in-depth description of how Actions work.

 ### 4. Select Action in the “When to ask” card

-<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select PMF trigger button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 5. Last step: Set Recontact Options correctly

 Lastly, scroll down to “Recontact Options”. Here you have full freedom to decide who you want to ask. Generally, you only want to ask every user once and prevent survey fatigue. It's up to you to decide if you want to ask again, when the user did not yet reply:

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 7. Congrats! You’re ready to publish your survey 💃

-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## Formbricks Widget running? {{ class: "text-white" }}
@@ -49,19 +49,29 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Then, create a new survey and look for the "Feedback Box" template:

-<Image src={CreateFeedbackBox} alt="Create feedback box by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateFeedbackBox}
+  alt="Create feedback box by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update question content

 Change the questions and answer options according to your preference:

-<Image src={ChangeTextContent} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeTextContent}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 3. Create user action to trigger Feedback Box:

 Go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool No-Code User Action Tracker:

-<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg" />
+<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## You can also add actions in your code {{ class: "text-white" }}
@@ -75,23 +85,48 @@ We have two options to track the Feedback Button in your application: innerText
 2. **CSS-Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.

 <div className="grid grid-cols-2 space-x-2">
-  <Image src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
-  <Image src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <Image
+    src={AddHTMLAction}
+    alt="Add HTML action"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
+  <Image
+    src={AddCSSAction}
+    alt="Add CSS action"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
 </div>

 ### 4. Select action in the “When to ask” card

-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 5. Set Recontact Options correctly

 Scroll down to “Recontact Options”. Here you have to choose the right settings so that the Feedback Box pops up every time the user action is performed. (Our default is that every user sees every survey only once):

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 6. You’re ready publish your survey!

-<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image
+  src={PublishSurvey}
+  alt="Publish survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## Setting up the Widget

@@ -53,13 +53,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Click on "Create Survey" and choose the template “Improve Trial Conversion”:

-<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateSurvey}
+  alt="Create survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update questions (if you like)

 You’re free to update the questions and answer options. However, based on our experience, we suggest giving the provided template a go 😊

-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 _Want to change the button color? You can do so in the product settings!_

@@ -80,29 +90,49 @@ How you trigger your survey depends on your product. There are two options:

 1. **Trigger by pageURL:** Let’s say you have a page under “/trial-cancelled” where you forward users once they cancelled the trial subscription. You can then create an user Action with the type `pageURL` with the following settings:

-<Image src={ActionPageurl} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ActionPageurl}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Whenever a user visits this page, the survey will be displayed ✅

 2. **Trigger by Button Click:** In a different case, you have a “Cancel Trial button in your app. You can setup a user Action with the according `innerText` like so:

-<Image src={ActionText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ActionText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Please have a look at our complete [Actions manual](/docs/actions/why) if you have questions.

 ### 5. Select Action in the “When to ask” card

-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 6. Last step: Set Recontact Options correctly

 Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you gather as many insights as possible. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 7. Congrats! You’re ready to publish your survey 💃

-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## Formbricks Widget running? {{ class: "text-white" }}
@@ -58,17 +58,32 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Click on "Create Survey" and choose the template “Interview Prompt”:

-<Image src={CreatePrompt} alt="Create interview prompt by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreatePrompt}
+  alt="Create interview prompt by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update prompt and CTA

 Update the prompt, description and button text to match your products tonality. You can also update the button color in the Product Settings.

-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 In the button settings you have to make sure it is set to “External URL”. In the URL field, copy your booking link (e.g. https://cal.com/company/user-interview). If you don’t have a booking link yet, head over to [cal.com](http://cal.com) and get one - they have the best free plan out there!

-<Image src={InterviewExample} alt="Add CSS action" quality="100" className="rounded-lg" />
+<Image
+  src={InterviewExample}
+  alt="Add CSS action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Save, and move over to the “Audience” tab.

@@ -89,7 +104,7 @@ Great, now only the “Power User” segment will see our Interview Prompt. But

 To create the trigger to show your Interview Prompt, go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool No-Code User Action Tracker:

-<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg" />
+<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## You can also add actions in your code {{ class: "text-white" }}
@@ -101,28 +116,48 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi

 1. **pageURL:** Whenever a user visits a page the survey will be displayed, as long as the other conditions match. Other conditions are pre-segmentation, if this user has seen a survey in the past 2 weeks, etc.

-<Image src={ActionPageurl} alt="Add page URL action" quality="100" className="rounded-lg" />
+<Image
+  src={ActionPageurl}
+  alt="Add page URL action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 2. **innerText & CSS-Selector:** When a user clicks an element (like a button) with a specific text content or CSS selector, the prompt will be displayed as long as the other conditions also match.

 <div className="grid grid-cols-2 space-x-2">
-  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
-  <Image src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
+  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+  <Image
+    src={ActionInner}
+    alt="Add inner text action"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
 </div>

 ### 5. Select action in the “When to ask” card

-<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select feedback button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 6. Set Recontact Options correctly

 Scroll down to “Recontact Options”. Here you have to choose the correct settings to strike the right balance between asking for user feedback and preventing survey fatigue. Your settings also depend on the size of your user base or segment. If you e.g. have thousands of “Power Users” you can easily afford to only display the prompt once. If you have a smaller user base you might want to ask twice to get a sufficient amount of bookings:

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 7. Congrats! You’re ready to publish your survey 💃 🤸

-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## Formbricks Widget running? {{ class: "text-white" }}
@@ -52,13 +52,23 @@ If you don't have an account yet, create one at [app.formbricks.com](https://app

 Click on "Create Survey" and choose one of the PMF survey templates. The first one is rather short, the latter builds on the ["Product-Market Fit Engine"](https://review.firstround.com/how-superhuman-built-an-engine-to-find-product-market-fit) developed by Superhuman:

-<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
+<Image
+  src={CreateSurvey}
+  alt="Create survey by template"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 2. Update questions (if you like)

 You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊 Here is a very [detailed description](https://coda.io/@rahulvohra/superhuman-product-market-fit-engine) of what to do with the data you’re collecting.

-<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
+<Image
+  src={ChangeText}
+  alt="Change text content"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 _Want to change the button color? You can do so in the product settings!_

@@ -88,23 +98,38 @@ This way you make sure that you separate potentially misleading opinions from va
 You need a trigger to display the survey but in this case, the filtering does all the work. It’s up to you to decide to display the survey after the user viewed a specific subpage (pageURL) or after clicking an element. Have a look at the [Actions manual](/docs/actions/why) if you are not sure how to set them up:

 <div className="grid grid-cols-2 space-x-2">
-  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
-  <Image src={ActionPageurl} alt="Add inner text action" quality="100" className="rounded-lg" />
+  <Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
+  <Image
+    src={ActionPageurl}
+    alt="Add inner text action"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
 </div>

 ### 5. Select Action in the “When to ask” card

-<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
+<Image
+  src={SelectAction}
+  alt="Select PMF trigger button action"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 6. Last step: Set Recontact Options correctly

 Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:

-<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
+<Image
+  src={RecontactOptions}
+  alt="Set recontact options"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ### 7. Congrats! You’re ready to publish your survey 💃

-<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
+<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 <Note>
  ## Formbricks Widget running? {{ class: "text-white" }}
@@ -13,7 +13,7 @@ export const meta = {

 To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).

-<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg" />
+<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 ## Functionality

@@ -20,7 +20,12 @@ Here you'll find help with Frequently Recurring Problems

 This can happen but fear not, the fix is easy: Delete the application storage of your browser and reload the page. This will force the app to re-fetch the data from the server:

-<Image src={ClearAppData} alt="Demo App Preview" quality="100" className="rounded-lg" />
+<Image
+  src={ClearAppData}
+  alt="Demo App Preview"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## "I ran 'pnpm i' but there seems to be an error with the packages"

@@ -65,8 +70,13 @@ However, in our experience it's better to run `pnpm dev` than having two termina

 ## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON

-<Image src={UncaughtPromise} alt="Uncaught promise" quality="100" className="rounded-lg" />
+<Image
+  src={UncaughtPromise}
+  alt="Uncaught promise"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 This happens when you're using the Demo App and delete the Person within the Formbricks app which the widget is currently connected with. We're fixing it, but you can also just logout your test person and reload the page to get rid of it.

-<Image src={Logout} alt="Logout Person" quality="100" className="rounded-lg" />
+<Image src={Logout} alt="Logout Person" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />
@@ -23,7 +23,12 @@ Before getting started, make sure you have:
 1. A Next.js application set up and running.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:

-<Image src={SetupChecklist} alt="Step 2 - Setup Checklist" quality="100" className="rounded-lg" />
+<Image
+  src={SetupChecklist}
+  alt="Step 2 - Setup Checklist"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## 1. Installing Formbricks SDK

@@ -103,8 +108,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })

 Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:

-<Image src={WidgetNotConnected} alt="Widget isnt connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 To this:

-<Image src={WidgetConnected} alt="Widget is connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
@@ -23,7 +23,12 @@ Before getting started, make sure you have:
 1. A Next.js application with Pages Directory set up and running.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:

-<Image src={SetupChecklist} alt="Step 2 - Setup Checklist" quality="100" className="rounded-lg" />
+<Image
+  src={SetupChecklist}
+  alt="Step 2 - Setup Checklist"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## 1. Installing Formbricks SDK

@@ -94,8 +99,18 @@ export default function Pages({ Component, pageProps }: PagesProps) {

 Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:

-<Image src={WidgetNotConnected} alt="Widget isnt connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 To this:

-<Image src={WidgetConnected} alt="Widget is connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
@@ -28,19 +28,34 @@ In app surveys have 6-10x better conversion rates than emailed out surveys. This

 While you can [self-host](/docs/self-hosting/deployment) Formbricks, the quickest and easiest way to get started is with the free Cloud plan. Just [sign up here](https://app.formbricks.com/auth/signup) and click through the onboarding, until you’re here:

-<Image src={I1} alt="Choose in app survey template" quality="100" className="rounded-lg" />
+<Image
+  src={I1}
+  alt="Choose in app survey template"
+  quality="100"
+  className="max-w-full sm:max-w-3xl rounded-lg "
+/>

 ## 2. Create your first survey

 To be able to see a survey in your app, you need to create one. We’ll choose one of the templates and head over to the survey settings:

-<Image src={I2} alt="Settings for popup survey inside web app" quality="100" className="rounded-lg" />
+<Image
+  src={I2}
+  alt="Settings for popup survey inside web app"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 As you can see in the orange note here, we have not yet connected Formbricks Cloud with our app. We will do so in just a minute, let’s first setup the survey correctly.

 Select “Web App” in the How to ask settings:

-<Image src={I3} alt="Survey settings for popup micro surve" quality="100" className="rounded-lg" />
+<Image
+  src={I3}
+  alt="Survey settings for popup micro surve"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Scroll down to Survey Trigger and choose “New Session”. This will cause this survey to appear when the Formbricks Widget tracks a new user session:

@@ -48,29 +63,49 @@ Scroll down to Survey Trigger and choose “New Session”. This will cause this
  src={I4}
  alt="In app survey trigger for feedback popup micro survey"
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />

 In **Recontact Options** we choose the following settings, so that we can play around with the survey more easily. By default, each survey will be shown only once to each user to prevent survey fatigue:

-<Image src={I5} alt="Options for survey popup in app micro survey" quality="100" className="rounded-lg" />
+<Image
+  src={I5}
+  alt="Options for survey popup in app micro survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey. On the Summary Page click through to the Setup Checklist:

-<Image src={I6} alt="pop up survey settings for inapp web survey" quality="100" className="rounded-lg" />
+<Image
+  src={I6}
+  alt="pop up survey settings for inapp web survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## 3. Set up the Formbricks Widget in your app

 On the Setup Checklist you have two elements. At the top you find the Widget Status Indicator. Once your app is connected to Formbricks Cloud successfully, this will turn green:

-<Image src={I7} alt="feedback popup in app survey" quality="100" className="rounded-lg" />
+<Image
+  src={I7}
+  alt="feedback popup in app survey"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 In the manual below, this code snippet contains all the information you need:

 - The **Environment ID** of your current Formbricks workspace
 - The **API Host** which is ‘https://app.formbricks.com’ for Cloud users

-<Image src={I8} alt="settings for in app survey popping up" quality="100" className="rounded-lg" />
+<Image
+  src={I8}
+  alt="settings for in app survey popping up"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## Load Formbricks widget in your app

@@ -89,7 +124,7 @@ Now, restart your app in your terminal to make sure the widget is loaded. Once i
  src={ReactApp}
  alt="In app survey in React app for micro surveys"
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />

 ## 5. Most frequent errors and how to debug them
@@ -104,7 +139,7 @@ Go back to [app.formbricks.com](http://app.formbricks.com) and go to the Setup C
  src={I9}
  alt="setup checklist ui of survey popup for in app surveys"
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
 **How to fix it:**

@@ -116,13 +151,23 @@ Go back to [app.formbricks.com](http://app.formbricks.com) and go to the Setup C

 If your app is connected with Formbricks Cloud, the survey might have not been loaded properly. Check the debug logs and search for the list of surveys loaded. It should look like so:

-<Image src={I11} alt="survey logs for in app survey pop up micro" quality="100" className="rounded-lg" />
+<Image
+  src={I11}
+  alt="survey logs for in app survey pop up micro"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 **How to fix it:**

 The widget only loads surveys which are **public** and **in progress**. Go to Formbricks Cloud and to the Survey Summary page. Check if your survey is live:

-<Image src={I10} alt="ui of survey popup for in app micro surveys" quality="100" className="rounded-lg" />
+<Image
+  src={I10}
+  alt="ui of survey popup for in app micro surveys"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ---

@@ -21,7 +21,12 @@ Before getting started, make sure you have:
 1. A React application created with 'create-react-app'.
 2. A Formbricks account with access to your environment ID and API host. You can find these in the **Setup Checklist** in the Settings:

-<Image src={SetupChecklist} alt="Step 2 - Setup Checklist" quality="100" className="rounded-lg" />
+<Image
+  src={SetupChecklist}
+  alt="Step 2 - Setup Checklist"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## 1. Installing Formbricks SDK

@@ -91,15 +96,25 @@ The app initializes 'formbricks' when it's loaded in a browser environment (due
  src={ReactApp}
  alt="In app survey in React app for micro surveys"
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />

 ## 3. Validate your setup

 Once you have completed the steps above, you can validate your setup by checking the **Setup Checklist** in the Settings. Your widget status indicator should go from this:

-<Image src={WidgetNotConnected} alt="Widget isnt connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetNotConnected}
+  alt="Widget isnt connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 To this:

-<Image src={WidgetConnected} alt="Widget is connected" quality="100" className="rounded-lg" />
+<Image
+  src={WidgetConnected}
+  alt="Widget is connected"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
@@ -35,7 +35,12 @@ Zapier is a powerful ally. Hook up Formbricks with Zapier and you can send your

 When setting up the Zap your life will be easier when you change the `questionId`s of your survey questions. You can only do so **before** you publish your survey.

-<Image src={UpdateQuestionId} alt="Update Question ID" quality="100" className="rounded-lg" />
+<Image
+  src={UpdateQuestionId}
+  alt="Update Question ID"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 _In every question card in the Advanced Settings you find the Question ID field. Update it so that you’ll recognize the response tied to this question._

@@ -43,61 +48,101 @@ _In every question card in the Advanced Settings you find the Question ID field.
  ## Already published? Duplicate survey {{ class: "text-white" }}
  You can only update the questionId when the survey was not yet published. Already published it? Just **duplicate
  it** to update the questionIds.
-  <Image src={DuplicateSurvey} alt="Duplicate Survey" quality="100" className="rounded-lg" />
+  <Image
+    src={DuplicateSurvey}
+    alt="Duplicate Survey"
+    quality="100"
+    className="rounded-lg max-w-full sm:max-w-3xl"
+  />
 </Note>

 ## Step 3: Send a test response

 In order to set up Zapier you’ll need a test response. This allows you to select the individual values of each response in your Zap. If you have Formbricks running locally and you want to set up an in-app survey, you can use our [Demo App](/docs/contributing/demo) to trigger a survey and submit a response.

-<Image src={SubmitTestResponse} alt="Submit Test Response" quality="100" className="rounded-lg" />
+<Image
+  src={SubmitTestResponse}
+  alt="Submit Test Response"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## Step 4: Setup your Zap

 Go to [zapier.com](https://zapier.com) and create a new Zap. Search for “Formbricks” to get started:

-<Image src={AddNewZap} alt="Add New Zap" quality="100" className="rounded-lg" />
+<Image src={AddNewZap} alt="Add New Zap" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 Then, choose the event you want to trigger the Zap on:

-<Image src={ChooseEvent} alt="Choose Event" quality="100" className="rounded-lg" />
+<Image src={ChooseEvent} alt="Choose Event" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 ## Step 5: Connect Formbricks with Zapier

 Now, you have to connect Zapier with Formbricks via an API Key:

-<Image src={ConnectWithFB1} alt="Connect with Formbricks - 1" quality="100" className="rounded-lg" />
-<Image src={ConnectWithFB2} alt="Connect with Formbricks - 2" quality="100" className="rounded-lg" />
+<Image
+  src={ConnectWithFB1}
+  alt="Connect with Formbricks - 1"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
+<Image
+  src={ConnectWithFB2}
+  alt="Connect with Formbricks - 2"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 Now you need an API key. Please refer to the [API Key Setup](/docs/api/api-key-setup) page to learn how to create one.

 Once you copied it in the newly opened Zapier window, you will be connected:

-<Image src={SuccessConnection} alt="Successful Connection" quality="100" className="rounded-lg" />
+<Image
+  src={SuccessConnection}
+  alt="Successful Connection"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 ## Step 6: Select Survey

 Next, you can choose from all the surveys you have created in this environment:

-<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg" />
+<Image src={SelectSurvey} alt="Select Survey" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 ## Step 7: Test your trigger

 Once you hit “Test” you will see the three most recent submissions for this survey. If you don’t have any submissions in the survey, submit one to continue setting up your Zap:

-<Image src={TestSubmission} alt="Test Submission" quality="100" className="rounded-lg" />
+<Image
+  src={TestSubmission}
+  alt="Test Submission"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
 _Now you're happy that you updated the questionId's_

 ## Step 8: Set up your Zap

 Now you have all the data you need at hand. The next steps depend on what you want to do with it. In this tutorial, we will send submissions to a Slack channel:

-<Image src={SlackChannelMsg} alt="Slack Channel Message" quality="100" className="rounded-lg" />
+<Image
+  src={SlackChannelMsg}
+  alt="Slack Channel Message"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>

 In the action itself we can determine the data and layout of the message. Here, we only choose the submission data. You can also refer to the meta data of the submission and the [attributes](/docs/attributes/why) of the person who submitted the survey.

-<Image src={SlackMsg} alt="Slack Message" quality="100" className="rounded-lg" />
+<Image src={SlackMsg} alt="Slack Message" quality="100" className="rounded-lg max-w-full sm:max-w-3xl" />

 We now receive a notifcation in our Slack channel whenever a Churn survey is completed:

-<Image src={ZapierMessage} alt="Zapier Message" quality="100" className="rounded-lg" />
+<Image
+  src={ZapierMessage}
+  alt="Zapier Message"
+  quality="100"
+  className="rounded-lg max-w-full sm:max-w-3xl"
+/>
@@ -50,7 +50,7 @@ You find the `questionId` in the Advanced Settings at the bottom of each questio
  src={QuestionId}
  alt="The question Id is located at the bottom of each question card in the survey editor."
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />

 ## Examples
@@ -56,5 +56,5 @@ If you add the `userId` URL parameter a Person will be created, if there is no e
  src={PeopleView}
  alt="If users are identified by email, it will show. If not, the internal Id will be set."
  quality="100"
-  className="rounded-lg"
+  className="rounded-lg max-w-full sm:max-w-3xl"
 />
@@ -18,4 +18,4 @@ At Formbricks, we understand that different users have different needs, and we s

 Please note that regardless of the method you choose, Formbricks is designed to be easy-to-use and flexible. So choose the method that best fits your comfort level and requirements, and start leveraging the **power of Formbricks** today!

---
+Looking for something not mentioned here? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -1,5 +1,5 @@
 export const meta = {
-  title: "Deploying Formbricks to production",
+  title: "Deploying Formbricks with Docker",
  description:
    "Utilize Docker-Compose for easy deployment on your machine. Clone the repo, configure settings, and build the image to access the app on localhost.",
 };
@@ -10,8 +10,6 @@ export const meta = {

 Quickly set up and start using Formbricks without getting into the technicalities of the build process. You'll be using an image that we've already built for you. The pre-built image is ready-to-run, and it only requires minimal configuration on your part. This approach is perfect for getting a functional instance of Formbricks up and running with minimal hassle. It's as easy as downloading the Docker image and firing up the container.

-## We will be using the pre-built Formbricks Docker Image
-
 This is ideal for those who are testing Formbricks or want to run it with minimal to no modifications. For this we use the [public Docker image](https://hub.docker.com/r/formbricks/formbricks) and a simple docker-compose file.

 ### Requirements
@@ -54,7 +52,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are
   <CodeGroup title="Generate NextAuth Secret">

   ```bash
-   sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.\*/NEXTAUTH_SECRET: $(openssl rand -base64 32)/" docker-compose.yml
+   sed -i "/NEXTAUTH_SECRET:$/s/NEXTAUTH_SECRET:.*/NEXTAUTH_SECRET: $(openssl rand -base64 32 | tr -dc 'a-zA-Z0-9' | head -c 32)/" docker-compose.yml
   ```

   </CodeGroup>
@@ -99,7 +97,7 @@ Ensure `docker` & `docker compose` are installed on your server/system. Both are

   </CodeGroup>

-3. Update env vars as necessary.
+3. Update env vars as necessary in the docker-compose file.
 4. Re-start the Formbricks stack

   <CodeGroup title="Relaunch the Docker Instance">
@@ -122,4 +120,49 @@ docker compose logs -f

 </CodeGroup>

+In an ideal case, you should see something like this:
+
+<CodeGroup title="Docker Build Underway">
+
+```bash
+[+] Running 9/16
+⠹ formbricks 15 layers [⣿⣤⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀] 29.78MB/47.76MB Pulling                                                           13.3s
+✔ 7264a8db6415 Already exists                                                                                                 0.0s
+⠋ 751194035c36 Downloading    [===============================>                   ]  29.78MB/47.76...                         8.1s
+✔ eff5dce73b38 Download complete                                                                                              1.7s
+✔ c8ce5be43019 Download complete                                                                                              1.2s
+✔ a2f33c630af5 Download complete                                                                                              5.1s
+✔ e3b64e437860 Download complete                                                                                              3.3s
+✔ a6551ac5f976 Download complete                                                                                              4.9s
+✔ 4f4fb700ef54 Download complete                                                                                              6.0s
+✔ 22163889e16b Download complete                                                                                              6.7s
+✔ dc647bb9eb13 Download complete                                                                                              7.8s
+⠋ 49c2ad494720 Waiting                                                                                                        8.1s
+⠋ 5c797a842dcb Waiting                                                                                                        8.1s
+⠋ 1f231213db04 Waiting                                                                                                        8.1s
+⠋ e407294bdcda Waiting                                                                                                        8.1s
+⠋ 6fd8358dca47 Pulling fs layer                                                                                               8.1s
+
+[+] Running 2/2
+✔ Container formbricks-quickstart-postgres-1    Created                                                                       0.0s
+✔ Container formbricks-quickstart-formbricks-1  Created                                                                       0.0s
+```
+
+</CodeGroup>
+
+And at the tail of the output, you should see something like this:
+
+<CodeGroup title="Docker Build Completed">
+
+```bash
+formbricks-quickstart-formbricks-1  | All migrations have been successfully applied.
+formbricks-quickstart-formbricks-1  |
+formbricks-quickstart-formbricks-1  | - info Loaded env from /home/nextjs/apps/web/.env
+formbricks-quickstart-formbricks-1  | Listening on port 3000 url: http://<random-string>:3000
+```
+
+</CodeGroup>
+
 You can close the logs again with `CTRL + C`.
+
+Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -1,12 +1,12 @@
 export const meta = {
-  title: "Deploying Formbricks to production",
+  title: "Deploying Formbricks from Source Code",
  description:
-    "Utilize Docker-Compose for easy deployment on your machine. Clone the repo, configure settings, and build the image to access the app on localhost.",
+    "Build the Formbricks Image right from the open-sourced codebase and make changes however needed. Deploy it then with the freedom of customizing even the compile-time environment variables.",
 };

 [Self-hosting]()

-# Deploying Formbricks to production
+# Building and Running Formbricks from Source

 This approach provides the flexibility to configure every aspect of your Formbricks instance, including environment variables that need to be set at build time. While we don't recommend changing the source code of Formbricks, this method allows you to set your own configuration that might be necessary for specific deployment needs. Keep in mind that this method requires a more in-depth understanding of Docker and the build process. However, the trade-off is the additional control and flexibility you gain, making it worth considering if you're a more advanced user or have very specific configuration needs.

@@ -91,8 +91,14 @@ Please refer to the [Formbricks Instructions](https://github.com/formbricks/form

 If you encounter any issues, you can check the logs of the container with:

+<CodeGroup title="Docker container logs">
+
 ```bash
 docker compose logs -f
 ```

+</CodeGroup>
+
 You can close the logs again with `CTRL + C`.
+
+Still facing issues? [Join our Discord!](https://formbricks.com/discord) and we'd be glad to assist you!
@@ -26,10 +26,14 @@ Before you proceed, make sure you have the following:

 Copy and paste the following command into your terminal:

+<CodeGroup title="Single Command to deploy Formbricks">
+
 ```bash
 /bin/sh -c "$(curl -fsSL https://raw.githubusercontent.com/formbricks/formbricks/main/docker/production.sh)"
 ```

+</CodeGroup>
+
 The script will prompt you for the following information:

 1. **Overwriting Docker GPG Keys**: If Docker GPG keys already exist, the script will ask if you want to overwrite them.
@@ -285,31 +285,6 @@ export const navigation: Array<NavGroup> = [
  },
 ];

-// export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) {
-//   return (
-//     <nav {...props}>
-//       <ul role="list">
-//         <TopLevelNavItem href="/docs/introduction/what-is-formbricks">Documentation</TopLevelNavItem>
-//         <TopLevelNavItem href="https://github.com/formbricks/formbricks">Star us on GitHub</TopLevelNavItem>
-//         <TopLevelNavItem href="https://formbricks.com/discord">Join our Discord</TopLevelNavItem>
-
-//         {navigation.map((group, groupIndex) => (
-//           <NavigationGroup key={group.title} group={group} className={groupIndex === 0 ? "md:mt-0" : ""} />
-//         ))}
-//         <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
-//           <Button
-//             href="https://app.formbricks.com/auth/signup"
-//             target="_blank"
-//             variant="filled"
-//             className="w-full">
-//             Get Started
-//           </Button>
-//         </li>
-//       </ul>
-//     </nav>
-//   );
-// }
-
 export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) {
  return (
    <nav {...props}>
@@ -321,8 +296,12 @@ export function Navigation(props: React.ComponentPropsWithoutRef<"nav">) {
          <NavigationGroup key={group.title} group={group} className={groupIndex === 0 ? "md:mt-0" : ""} />
        ))}
        <li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
-          <Button href="#" variant="filled" className="w-full">
-            Sign in
+          <Button
+            href="https://app.formbricks.com/auth/signup"
+            target="_blank"
+            variant="filled"
+            className="w-full">
+            Get Started
          </Button>
        </li>
      </ul>