docs: adds docs changes due to actions refactoring and inlineTriggers…

… removal (#2593)

apps/docs/app/app-surveys/actions/page.mdx

@@ -1,7 +1,7 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.png";
-import I2 from "./images/I2.png";
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
 
 export const metadata = {
   title: "Using Actions in Formbricks | Fine-tuning User Moments",
@@ -22,7 +22,7 @@ Understanding user thoughts and feelings at critical moments in their journey is
 
 ## **How Do Actions Work?**
 
-Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions either programmatically in your code or through a user-friendly No-Code interface within the Formbricks dashboard.
+Actions in Formbricks App Surveys are deeply integrated with user activities within your app. When a user performs a specified action, the Formbricks widget detects this activity and can present a survey to that specific user if the trigger conditions match of that survey, while also recording the event. This capability ensures that surveys are not only triggered at the right time but are also tailored to the user’s recent interactions within the app. You can set up these actions through a user-friendly No-Code interface within the Formbricks dashboard.
 
 ## **Why Are Actions Useful?**
 
@@ -33,13 +33,6 @@ Actions are invaluable for enhancing survey relevance and effectiveness:
 - **User Segments**: Analyze action data to create detailed user segments, targeting specific groups with surveys that are pertinent to their behaviors or interactions within the app.
 - **User Targeting**: Precise targeting based on user actions and attributes ensures that surveys are shown only to users who meet certain criteria, enhancing the relevance and effectiveness of each survey.
 
-<Note>
-  You now have the option to create survey-specific action classes directly within the survey editor. These
-  actions are exclusive to the individual survey and won't appear in the global action list, helping to keep
-  it uncluttered. For actions that are needed across multiple surveys, we recommend creating them from the
-  Actions tab.
-</Note>
-
 ## **Setting Up No-Code Actions**
 
 Formbricks offers an intuitive No-Code interface that allows you to configure actions without needing to write any code.

apps/docs/app/app-surveys/quickstart/page.mdx

@@ -1,14 +1,13 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import I1 from "./images/I1.png";
-import I2 from "./images/I2.png";
-import I3 from "./images/I3.png";
-import I4 from "./images/I4.png";
-import I5 from "./images/I5.png";
-import I6 from "./images/I6.png";
-import I7 from "./images/I7.png";
-import I8 from "./images/I8.png";
-
+import I1 from "./images/I1.webp";
+import I2 from "./images/I2.webp";
+import I3 from "./images/I3.webp";
+import I4 from "./images/I4.webp";
+import I5 from "./images/I5.webp";
+import I6 from "./images/I6.webp";
+import I7 from "./images/I7.webp";
+import I8 from "./images/I8.webp";
 
 export const metadata = {
   title: "Formbricks Quickstart Guide: App Surveys Made Easier & Faster",
@@ -17,18 +16,21 @@ export const metadata = {
 };
 
 #### App Surveys
+
 # Quickstart
 
 App surveys have 6-10x better conversion rates than emailed out surveys. This tutorial explains how to run an app survey in your web app in 10 to 15 minutes. Let’s go!
 
 <Note>
-App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run surveys on your public facing website, head over to the [Website Surveys Quickstart Guide](/website-surveys/quickstart).
+  App Surveys are ideal for websites that **have a user authentication** system. If you are looking to run
+  surveys on your public facing website, head over to the [Website Surveys Quickstart
+  Guide](/website-surveys/quickstart).
 </Note>
 
 1. **Create a free Formbricks Cloud account**: While you can [self-host](/self-hosting/deployment) Formbricks, but 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 you'll be guided to our onboarding like below:
 
 <Note>
-Website & App Surveys have the same integration process. The difference will come when we setup our survey.
+  Website & App Surveys have the same integration process. The difference will come when we setup our survey.
 </Note>
 
 <MdxImage
@@ -70,41 +72,41 @@ Onboarding is complete! Now let’s create our first survey as you should see te
 Pick the Survey Type as **App Survey**.
 
 <MdxImage
-    src={I5}
-    alt="Survey settings for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I5}
+  alt="Survey settings for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and inside **When**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
+4. **Set Trigger for the Survey**: Scroll down to Survey Trigger and click on **+ Add action**, choose **New Session**. This will cause this survey to appear when the Formbricks Widget tracks a new user session:
 
 <MdxImage
-    src={I6}
-    alt="Survey trigger settings for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I6}
+  alt="Survey trigger settings for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 5. **Set Recontact Options for debugging**: 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:
 
 <Note>
-Please change this setting later on after testing your survey to prevent survey fatigue for your users.
+  Please change this setting later on after testing your survey to prevent survey fatigue for your users.
 </Note>
 
 <MdxImage
-    src={I7}
-    alt="Recontact options for app survey"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I7}
+  alt="Recontact options for app survey"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 6. **Publish your survey**: Now hit **Publish** and you’ll be forwarded to the Summary Page. This is where you’ll find the responses to this survey.
 
 <MdxImage
-    src={I8}
-    alt="Survey published successfully"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
+  src={I8}
+  alt="Survey published successfully"
+  quality="100"
+  className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
 ---

apps/docs/app/best-practices/cancel-subscription/page.mdx

@@ -152,8 +152,7 @@ These settings make sure the survey is always displayed, when a user wants to Ca
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Churn Survey
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/docs-feedback/page.mdx

@@ -5,9 +5,9 @@ import ChangeId from "./change-id.webp";
 import CopyIds from "./copy-ids.webp";
 import DocsNavi from "./docs-navi.webp";
 import DocsTemplate from "./docs-template.webp";
-import SelectNonevent from "./select-nonevent.webp";
+import SelectAction from "./select-action.webp";
+import SurveyTrigger from "./survey-trigger.webp";
 import SwitchToDev from "./switch-to-dev.webp";
-import WhenToAsk from "./when-to-ask.webp";
 
 export const metadata = {
   title:
@@ -73,10 +73,10 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
   choices accordingly. They have to be identical to the frontend we're building in the next step.
 </Note>
 
-6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “When to ask” and create a new Action:
+6. Click on “Continue to Settings or select the audience tab manually. Scroll down to “Survey Trigger” and create a new Action:
 
 <MdxImage
-  src={WhenToAsk}
+  src={SurveyTrigger}
   alt="set up when to ask card"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"
@@ -89,7 +89,7 @@ To get this running, you'll need a bit of time. Here are the steps we're going t
 8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
 
 <MdxImage
-  src={SelectNonevent}
+  src={SelectAction}
   alt="select nonevent"
   quality="100"
   className="max-w-full rounded-lg sm:max-w-3xl"

apps/docs/app/best-practices/feature-chaser/page.mdx

@@ -1,7 +1,7 @@
 import { MdxImage } from "@/components/MdxImage";
 
 import ActionCSS from "./action-css.webp";
-import ActionText from "./action-text.webp";
+import ActionText from "./action-innertext.webp";
 import ChangeText from "./change-text.webp";
 import CreateSurvey from "./create-survey.webp";
 import Publish from "./publish.webp";
@@ -123,8 +123,7 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feature Chaser
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/feedback-box/page.mdx

@@ -1,13 +1,13 @@
 import { MdxImage } from "@/components/MdxImage";
 import Link from "next/link";
 
+import ActionCSS from "./action-css.webp";
+import ActionText from "./action-innertext.webp";
 import AddAction from "./add-action.webp";
-import AddCSSAction from "./add-css-action.webp";
-import AddHTMLAction from "./add-html-action.webp";
 import ChangeTextContent from "./change-text-content.webp";
 import CreateFeedbackBox from "./create-feedback-box-by-template.webp";
 import PublishSurvey from "./publish-survey.webp";
-import SelectAction from "./select-feedback-button-action.webp";
+import SelectAction from "./select-action.webp";
 import RecontactOptions from "./set-recontact-options.webp";
 
 export const metadata = {
@@ -69,20 +69,14 @@ Go to the “Audience” tab, find the “When to send” card and choose “Add
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
-<Note>
-  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
-  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
-  is embedded.
-</Note>
-
 We have two options to track the Feedback Button in your application: innerText and CSS-Selector:
 
 1. **innerText:** This means that whenever a user clicks any HTML item in your app which has an `innerText` of `Feedback` the Feedback Box will be displayed.
 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 max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
-  <MdxImage src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
-  <MdxImage src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionText} alt="Add HTML action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
 </div>
 
 ### 4. Select action in the “When to ask” card
@@ -118,8 +112,7 @@ Scroll down to “Recontact Options”. Here you have to choose the right settin
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ### &nbsp;

apps/docs/app/best-practices/improve-trial-cr/page.mdx

@@ -132,8 +132,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/interview-prompt/page.mdx

@@ -103,12 +103,6 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
-<Note>
-  ## You can also add actions in your code You can also create [Code Actions](/actions/code) using
-  `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
-  is embedded.
-</Note>
-
 Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display it on a page visit since you already filter who sees the prompt by attributes.
 
 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.
@@ -122,19 +116,9 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
 
 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="flex max-w-full flex-col sm:max-w-3xl lg:gap-1">
-  <MdxImage
-    src={ActionCSS}
-    alt="Add CSS action"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
-  />
-  <MdxImage
-    src={ActionInner}
-    alt="Add inner text action"
-    quality="100"
-    className="max-w-full rounded-lg sm:max-w-3xl"
-  />
+<div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
+  <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
+  <MdxImage src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
 </div>
 
 ### 5. Select action in the “When to ask” card
@@ -162,10 +146,8 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <MdxImage src={Publish} alt="Publish survey" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 <Note>
-  ## Formbricks Widget running?
-     You need to have the Formbricks Widget installed to display the Feedback Box
-     in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-     to install the widget.
+  ## Formbricks Widget running? 
+  You need to have the Formbricks Widget installed to display the Feedback Box in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/best-practices/pmf-survey/page.mdx

@@ -94,18 +94,19 @@ 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](/actions/why) if you are not sure how to set them up:
 
 <Col>
-  <div>
+
+  <div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl items-end">
     <MdxImage
       src={ActionCSS}
       alt="Add CSS action"
       quality="100"
-      className="max-w-full rounded-lg sm:max-w-3xl"
+      className="rounded-lg"
     />
     <MdxImage
       src={ActionPageurl}
       alt="Add inner text action"
       quality="100"
-      className="max-w-full rounded-lg sm:max-w-3xl"
+      className="rounded-lg"
     />
   </div>
 </Col>
@@ -135,8 +136,7 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 
 <Note>
   ## Formbricks Widget running? You need to have the Formbricks Widget installed to display the Feedback Box
-  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart)
-  to install the widget.
+  in your app. Please follow [this tutorial (Step 4 onwards)](/app-surveys/quickstart) to install the widget.
 </Note>
 
 ###

apps/docs/app/developer-docs/integrations/n8n/page.mdx

@@ -1,20 +1,20 @@
 import { MdxImage } from "@/components/MdxImage";
 
-import AddApiKey from "./add-api-key.png";
-import AddDiscord from "./add-discord.png";
-import AddFormbricksTrigger from "./add-formbricks-trigger.png";
-import CreateNewCredentialBtn from "./create-new-credential-btn.png";
-import DiscordResponse from "./discord-response.png";
-import DuplicateSurvey from "./duplicate-survey.png";
-import FillDiscordDetails from "./fill-discord-details.png";
-import ListenForEvent from "./listen-for-event.png";
-import SelectEvent from "./select-event.png";
-import SelectSurvey from "./select-survey.png";
-import SelectedSurveys from "./selected-surveys.png";
-import SubmitTestResponse from "./submit-test-response.png";
-import SuccessConnection from "./success-connection.png";
-import TestResponseSuccess from "./test-response-success.png";
-import UpdateQuestionId from "./update-question-id.png";
+import AddApiKey from "./add-api-key.webp";
+import AddDiscord from "./add-discord.webp";
+import AddFormbricksTrigger from "./add-formbricks-trigger.webp";
+import CreateNewCredentialBtn from "./create-new-credential-btn.webp";
+import DiscordResponse from "./discord-response.webp";
+import DuplicateSurvey from "./duplicate-survey.webp";
+import FillDiscordDetails from "./fill-discord-details.webp";
+import ListenForEvent from "./listen-for-event.webp";
+import SelectEvent from "./select-event.webp";
+import SelectSurvey from "./select-survey.webp";
+import SelectedSurveys from "./selected-surveys.webp";
+import SubmitTestResponse from "./submit-test-response.webp";
+import SuccessConnection from "./success-connection.webp";
+import TestResponseSuccess from "./test-response-success.webp";
+import UpdateQuestionId from "./update-question-id.webp";
 
 export const metadata = {
   title: "Comprehensive Guide to Integrating Formbricks with n8n",