feat: Revamp No-Code Action Form (#2688)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

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

@@ -57,28 +57,43 @@ To add a No-Code Action:
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Here are three types of No-Code actions you can set up:
+Here are four types of No-Code actions you can set up:
 
-### **1. Page URL Action**
+### **1. Click Action**
+
+Click Action is triggered when a user clicks on a specific element within your application. You can define the element's inner text or CSS selector to trigger the survey.
+
+- **Inner Text**: Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
+
+- **CSS Selector**: Verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
+
+### **2. Page view Action**
+
+This action is triggered when a user visits a page within your application.
+
+### **3. Exit Intent Action**
+
+This action is triggered when a user is about to leave your application. It helps capture user feedback before they exit, providing valuable insights into user experiences and potential improvements.
+
+### **4. 50% Scroll Action**
+
+This action is triggered when a user scrolls through 50% of a page within your application. It helps capture user feedback at a specific point in their journey, enabling you to gather insights based on user interactions.
 
 This action is triggered when a user visits a specific page within your application. You can define the URL match conditions as follows:
 
+<Note>
+You can combine the url filters with any of the no-code actions to trigger the survey based on the URL match conditions.
+
+### **URL Match Conditions**
+
 - **exactMatch**: Triggers the action when the URL exactly matches the specified string.
 - **contains**: Activates when the URL contains the specified substring.
 - **startsWith**: Fires when the URL starts with the specified string.
 - **endsWith**: Executes when the URL ends with the specified string.
 - **notMatch**: Triggers when the URL does not match the specified condition.
 - **notContains**: Activates when the URL does not contain the specified substring.
 
-### **2. innerText Action**
-
-Checks if the innerText of a clicked HTML element, like a button label, matches a specific text. This action allows you to display a survey based on text interactions within your application.
-
-### **3. CSS Selector Action**
-
-This action verifies if a clicked HTML element matches a provided CSS selector, such as a class, ID, or any other CSS selector used in your website. It enables survey triggers based on element interactions.
-
-<Note>You can have an action use combination of the 3 types as you wish</Note>
+</Note>
 
 ## **Setting Up Code Actions**
 

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

@@ -41,9 +41,7 @@ To run the Churn Survey in your app you want to proceed as follows:
 4. Prevent that churn!
 
 <Note>
-  ## Formbricks Widget running?
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
-  (takes 15mins max.)](/app-surveys/quickstart)
+  ## Formbricks Widget running? We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
 ### 1. Create new Churn Survey
@@ -80,9 +78,9 @@ In this case, you don’t really need to pre-segment your audience. You likely w
 
 ### 4. Set up a trigger
 
-To create the trigger for your Churn Survey, you have two options to choose from:
+To create the trigger for your Churn Survey, you have three 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:
+1. **Trigger by Inner Text:** You likely have a “Cancel Subscription” button in your app. You can setup a user Action with the according `Inner Text` to trigger the survey, like so:
 
 <MdxImage
   src={TriggerInnerText}
@@ -100,7 +98,7 @@ To create the trigger for your Churn Survey, you have two options to choose from
   className="max-w-full rounded-lg 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:
+1. **Trigger by page view filters:** 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 `Page View` and add select `Limit to specific pages` to add url filters, with the following settings:
 
 <MdxImage
   src={TriggerPageUrl}
@@ -111,7 +109,7 @@ To create the trigger for your Churn Survey, you have two options to choose from
 
 Whenever a user visits this page, matches the filter conditions above and the recontact options (below) the survey will be displayed ✅
 
-Here is our complete [Actions manual](/actions/why) covering [Code](/actions/code) and [No-Code](/actions/no-code) Actions.
+Here is our complete [Actions manual](/app-surveys/actions/) covering [No-Code](/app-surveys/actions#setting-up-no-code-actions) and [Code](/app-surveys/actions#setting-up-code-actions) Actions.
 
 <Note>
   ## Pre-churn flow coming soon We’re currently building full-screen survey pop-ups. You’ll be able to prevent

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

@@ -38,9 +38,10 @@ To run the Feature Chaser survey in your app you want to proceed as follows:
 2. Setup a user action to display survey at the right point in time
 
 <Note>
-  ## Formbricks Widget running?
-  We assume that you have already installed the Formbricks Widget in your web wapp. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
-  (takes 15mins max.)](/app-surveys/quickstart)
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web
+  wapp. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start
+  Guide (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
 ### 1. Create new Feature Chaser
@@ -73,11 +74,11 @@ Save, and move over to where the magic happens: The “Audience” tab.
 
 Before setting the right trigger, you need to identify a user action in your app which signals, that they have just used the feature you want to understand better. In most cases, it is clicking a specific button in your product.
 
-You can create [Code Actions](/actions/code) and [No Code Actions](/actions/no-code) to follow users through your app. In this example, we will create a No Code Action.
+You can create [Code Actions](/app-surveys/actions#setting-up-code-actions) and [No Code Actions](/app-surveys/actions#setting-up-no-code-actions) to follow users through your app. In this example, we will create a No Code Action.
 
 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:
+1. **Trigger by Inner Text:** 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 `Inner Text` to trigger the survey, like so:
 
 <MdxImage
   src={ActionText}

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

@@ -65,19 +65,18 @@ Change the questions and answer options according to your preference:
 
 ### 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:
+Go to the “Audience” tab, find the “When to send” card and choose “Add Action”. We will now use our super cool User Action Tracker:
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 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.
+1. **Inner Text:** This means that whenever a user clicks any HTML item in your app which has an `Inner Text` of `Feedback` the Feedback Box will be displayed.
 
-<div className="grid max-w-full grid-cols-2 space-x-2 sm:max-w-3xl">
-  <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>
+   <MdxImage src={ActionText} alt="Add HTML action" quality="100" className="rounded-lg" />
+
+2. **CSS Selector:** This means that when an element with a specific CSS-Selector like `#feedback-button` is clicked, your Feedback Box is triggered.
+   <MdxImage src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
 
 ### 4. Select action in the “When to ask” card
 

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

@@ -38,9 +38,8 @@ To display the Trial Conversion Survey in your app you want to proceed as follow
 3. Print that 💸
 
 <Note>
-  ## Formbricks Widget running?
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
-  (takes 15mins max.)](/app-surveys/quickstart)
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide (takes 15mins max.)](/app-surveys/quickstart)
 </Note>
 
 ### 1. Create new Trial Conversion Survey
@@ -84,7 +83,7 @@ Pre-segmentation isn't relevant for this survey because you likely want to solve
 
 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:
+1. **Trigger by Page view:** 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 `Page View` and add select `Limit to specific pages` to add url filters, with the following settings:
 
 <MdxImage
   src={ActionPageurl}
@@ -95,7 +94,7 @@ How you trigger your survey depends on your product. There are two options:
 
 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:
+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 `Inner Text` like so:
 
 <MdxImage
   src={ActionText}
@@ -104,7 +103,7 @@ Whenever a user visits this page, the survey will be displayed ✅
   className="max-w-full rounded-lg sm:max-w-3xl"
 />
 
-Please have a look at our complete [Actions manual](/actions/why) if you have questions.
+Please have a look at our complete [Actions manual](/app-surveys/actions/) if you have questions.
 
 ### 5. Select Action in the “When to ask” card
 

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

@@ -43,9 +43,8 @@ To display an Interview Prompt in your app you want to proceed as follows:
 3. That’s it! 🎉
 
 <Note>
-  ## Formbricks Widget running?
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
-  (15mins).](/app-surveys/quickstart)
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide (15mins).](/app-surveys/quickstart)
 </Note>
 
 ### 1. Create new Interview Prompt
@@ -86,9 +85,7 @@ Save, and move over to the “Audience” tab.
 ### 3. Pre-segment your audience (coming soon)
 
 <Note>
-  ## Filter by attribute coming soon.
-     We're working on pre-segmenting users by attributes. We will update this
-     manual in the next few days.
+  ## Filter by attribute coming soon. We're working on pre-segmenting users by attributes. We will update this manual in the next few days.
 </Note>
 
 Once you clicked over to the “Audience” tab you can change the settings. In the **Who To Send** card, select “Filter audience by attribute”. This allows you to only show the prompt to a specific segment of your user base.
@@ -99,13 +96,13 @@ Great, now only the “Power User” segment will see our Interview Prompt. But
 
 ### 4. Set up a trigger for the Interview Prompt:
 
-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:
+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 User Action Tracker:
 
 <MdxImage src={AddAction} alt="Add action" quality="100" className="max-w-full rounded-lg sm:max-w-3xl" />
 
 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.
+1. **Page view:** 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.
 
 <MdxImage
   src={ActionPageurl}
@@ -114,7 +111,7 @@ Generally, we have two types of user actions: Page views and clicks. The Intervi
   className="max-w-full rounded-lg 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.
+2. **Click(Inner Text & 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 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" />
@@ -146,8 +143,7 @@ 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

@@ -37,9 +37,8 @@ To display the Product-Market Fit survey in your app you want to proceed as foll
 3. Setup the user action to display survey at good point in time
 
 <Note>
-  ## Formbricks Widget running?
-  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide
-  (15mins).](/app-surveys/quickstart)
+  ## Formbricks Widget running? 
+  We assume that you have already installed the Formbricks Widget in your web app. It’s required to display messages and surveys in your app. If not, please follow the [Quick Start Guide (15mins).](/app-surveys/quickstart)
 </Note>
 
 ### 1. Create new PMF survey
@@ -91,7 +90,7 @@ This way you make sure that you separate potentially misleading opinions from va
 
 ### 4. Set up a trigger for the Product-Market Fit survey:
 
-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:
+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](/app-surveys/actions/) if you are not sure how to set them up:
 
 <Col>