chore: Newsletter article and best practices docs bug fix (#1952)

Co-authored-by: Matti Nannt <mail@matthiasnannt.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>

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

@@ -46,7 +46,8 @@ 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
+  ## 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.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -119,7 +120,8 @@ Whenever a user visits this page, matches the filter conditions above and the re
 Here is our complete [Actions manual](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
 
 <Note>
-  ## Pre-churn flow coming soon We’re currently building full-screen survey pop-ups. You’ll be able to prevent
+  ## Pre-churn flow coming soon 
+  We’re currently building full-screen survey pop-ups. You’ll be able to prevent
   users from closing the survey unless they respond to it. It’s certainly debatable if you want that but you
   could force them to click through the survey before letting them cancel 🤷
 </Note>
@@ -156,7 +158,8 @@ 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
+  ## 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)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -43,7 +43,8 @@ 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
+  ## 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.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -127,7 +128,8 @@ Lastly, scroll down to “Recontact Options”. Here you have full freedom to de
 <Image 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 Feature Chaser
+  ## 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)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -43,7 +43,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
+  ## 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.)](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -79,7 +80,8 @@ 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
+  ## Filter by attribute coming soon 
+  We're working on pre-segmenting users by attributes. We will update this
   manual in the next days.
 </Note>
 
@@ -136,7 +138,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image 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
+  ## 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)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -48,7 +48,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
+  ## 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).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -91,7 +92,8 @@ 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
+  ## 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>
 
@@ -108,7 +110,8 @@ To create the trigger to show your Interview Prompt, go to the “Audience” ta
 <Image 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](/docs/actions/code) using
+  ## You can also add actions in your code
+   You can also create [Code Actions](/docs/actions/code) using
   `formbricks.track("Eventname")` - they will automatically appear in your Actions overview as long as the SDK
   is embedded.
 </Note>
@@ -161,7 +164,8 @@ Scroll down to “Recontact Options”. Here you have to choose the correct sett
 <Image 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
+  ## 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)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

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

@@ -42,7 +42,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
+  ## 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).](/docs/getting-started/quickstart-in-app-survey)
 </Note>
@@ -78,7 +79,8 @@ Save, and move over to where the magic happens: 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
+  ## Filter by attribute coming soon
+   We're working on pre-segmenting users by attributes. We will update this
   manual in the next days.
 </Note>
 
@@ -139,7 +141,8 @@ Lastly, scroll down to “Recontact Options”. Here you have to choose the corr
 <Image 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
+  ## 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)](/docs/getting-started/quickstart-in-app-survey)
   to install the widget.
 </Note>

apps/formbricks-com/components/shared/LayoutMdx.tsx

@@ -60,7 +60,7 @@ export default function LayoutMdx({ meta, children }: Props) {
               )}
             </header>
           )}
-          <Prose className="prose-h2:text-2xl prose-li:text-base prose-h2:mt-4 prose-p:text-base  prose-p:mb-4 prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic prose-ul:pl-12">
+          <Prose className="prose-h2:text-2xl prose-li:text-base prose-h2:mt-6 prose-p:text-base  prose-p:mb-4 prose-h3:text-xl prose-a:text-slate-900 prose-a:hover:text-slate-900 prose-a:text-decoration-brand prose-a:not-italic prose-ul:pl-12">
             {children}
           </Prose>
         </article>

apps/formbricks-com/pages/blog/how-smart-writers-use-formbricks-open-source-tool-to-measure-the-quality-of-their-newsletter-content/index.mdx

@@ -0,0 +1,165 @@
+import AuthorBox from "@/components/shared/AuthorBox";
+import { Callout } from "@/components/shared/Callout";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import NewsletterSurveyCode from './code-for-embedding-newsletter-survey-formbricks.png';
+import Header from './header-newsletter-survey-content-open-source-kpi.webp';
+import NewsletterSurvey from './improve-newsletter-content-editor-formbricks.png';
+import NewsletterSurveyModal from './improve-newsletter-content-modal-formbricks.png';
+import SurveyResponses from './survey-responses.png';
+import YourSurveys from './your-surveys-formbricks.png';
+export const meta = {
+  title: "How to measure the quality of your newsletter content with Formbricks",
+  description:
+    "Newsletters boast the highest ROI in email marketing but grasping your audience's resonance is key. Formbricks steps in to empower you with tools to measure your content quality and explore reader engagement in newsletters.",
+  date: "2024-01-24",
+  publishedTime: "2024-01-24T12:00:00",
+  authors: ["Olasunkanmi Balogun"],
+  section: "Newsletter Survey",
+  tags: ["Improve Newsletter Content"],
+};
+
+<Image src={Header} alt="Gather in app feedback for free with these 6 tools." className="w-full rounded-lg" />
+
+<AuthorBox
+  name="Olasunkanmi Balogun"
+  title="Content Writer"
+  date="January 24th, 2024"
+  duration="5"
+  author={"Ola"}
+/>
+
+_Newsletters are a form of email marketing which has the highest ROI of all marketing channels. According to the research (source below), for every dollar spent you can get a return of $36 to $40._
+
+You reap this sweet, juciy ROI if your content resonates with your audience. You can only manage what you measure, so here is a quick, free and easy way to measure the quality of your newsletter content.
+
+After this article, you have everything you need to easily measure the quality of your emails. We walk through you the setup, how to embed it in your email and what to do with the insights.
+
+Here’s what we’ll cover:
+
+1. **How link prefilling and user identification maximize your insights**
+2. **How to create the right survey with Formbricks**
+3. **Embeddung the survey in your email**
+4. **How to improve the analysis by identifying users**
+5. **How to enrich the response with hidden fields**
+6. **Auto-create surveys via API**
+
+Toes are in the water, let’s dive deep 🏊
+
+<Callout title="What Is Formbricks" type="note">
+Formbricks is an experience management suite built on the **largest open source survey stack** worldwide. It’s easy to use and packs all integrations you'd need.
+When you communicate via email, Formbricks bridges the gap between you and your readers. It packs everything you need to measure how happy users are with your newsletter content.
+</Callout>
+
+## How link prefilling and user identification maximize your insights
+
+To effectively measure the quality of your newsletter, you need:
+
+- **Survey Embed Code:** A code snippet to embed the survey in the email (provided by Formbricks)
+- **Link Prefilling**: So that if a reader clicks on one of the stars or smileys in your rating survey, the data is stored and the first question is skipped (more on this later).
+- **Dynamic User Identification:** You can append the email of the reader dynamically to the survey to automatically create a personal profile for the reader. Hence, if this person provides any other feedback in their customer lifetime, it is gathered in the person's view.
+
+Let's see how to stack these features to get what you're looking for 🤓
+
+## How to create the right survey with Formbricks
+
+1. After signing up on the Formbricks platform, you’ll be navigated to your dashboard. To create a survey for your newsletter, select the **Growth** filter and choose the “**Improve Newsletter Content**” survey template.
+
+<Image
+  src={YourSurveys}
+  alt="Formbricks growth survey templates"
+  className="w-full rounded-lg"
+/>
+
+2. You’ll be directed to a page that will be your canvas for customizing your survey questions. For your survey’s first question, you can display smileys, stars, or even numbers for your survey rating; in the image below, we used a smiley. 
+
+<Callout title="Dynamic Follow-up Questions with Logic Jumps" type="note">
+You want to ask different follow up questions based on the rating? No problem with Logic Jumps!
+</Callout>
+
+<Image
+  src={NewsletterSurvey}
+  alt="Formbricks newsletter survey editor"
+  className="w-full rounded-lg"
+/>
+
+3. When you are done customizing your survey questions, navigate to the **Settings** tab and choose the type of survey you want. Here, you have to pick Link Survey.
+
+4. After configuring the survey settings however you like, click the **Publish** button on the top right corner of the page, and a modal should pop up once this is successful.
+
+
+## Embedding the survey in your email
+<Image
+  src={NewsletterSurveyModal}
+  alt="Formbricks newsletter survey modal"
+  className="w-full rounded-lg"
+/>
+
+Since you would traditionally want to embed this survey in your email, select the **Embed Survey** card. You will be directed to another window, where you'll find **Embed in Email**.
+
+<Image
+  src={NewsletterSurveyCode}
+  alt="Formbricks newsletter survey embed code"
+  className="w-full rounded-lg"
+/>
+
+5. Finally, click the button with the “**View Embed Code**” text at the top right corner of the modal and simply copy the HTML code for your survey anywhere you want it in your newsletter. You can see the preview in the above image.
+
+So, how does this work under the hood? In the next section, we’ll see how Formbricks utilizes link prefilling to create personalized responses for you.
+
+## How to improve the analysis by identifying users
+
+Apart from the [data prefilling](https://formbricks.com/docs/link-surveys/data-prefilling) needed to store which rating a user clicked on in an email, we use Formbricks link identification.
+
+Link identification lets you link a response to a person. Whenever you set a `userId` in the URL, the Formbricks backend will create a new person profile.
+
+This is what the link looks like: 
+
+`https://formbricks.com/s/clrgp68g2569g1225h3f5ayql?rating=5&userId=johannes@formbricks.com`
+
+### When do I need identified users?
+
+This is mostly useful if you know that you will collect more feedback from this one person. For example, if you run an in-app or website survey, you can also pass the userId to Formbricks and both responses will be attributed to the same user.
+
+This obiously also works for surveys sent to the same user over the customer lifetime.
+
+In your dashboard on Formbricks, here’s how it will look:
+
+<Image
+  src={SurveyResponses}
+  alt="Formbricks personalized survey responses"
+  className="w-full rounded-lg"
+/>
+
+As Johannes completes the survey, you'll see a personalized, full response from him.
+
+## How to use Hidden Fields to attach more info to responses
+
+There might be more information you already have and want to use in the analysis of your survey results. A good way to facilitate that is using Hidden Fields.
+
+Hidden Fields - as you can tell from the name - do not appear in the survey flow. They can be filled via URL as follows:
+
+`?fieldId=Content`
+
+So for example: `?job=Founder`. Or combinbed with the rating and identification parameters:
+
+`https://formbricks.com/s/clrgp68g2569g1225h3f5ayql?rating=5&userId=johannes@formbricks.com&fieldId=Founder`
+
+As you see, the survey URL is powerful ally when it comes to getting the most out of your survey respondents 😎 
+
+<Callout title="Auto-create surveys via API" type="note">
+If you send out a lot of emails periodically, it might be worth creating your surveys automatically. Formbricks has an API for it!
+
+Going through that in detail would lead to far, but here is all the [documentation you need.](https://formbricks.com/docs/api/management/surveys#create-survey) We're also more than happy helping you set it up in our [Discord](https://formbricks.com/discord)
+</Callout>
+
+## In Conclusion
+
+Understanding what resonates with your readers is the compass that points toward growth, and so far, we’ve seen how Formbricks can help you achieve this. Formbricks not only provides actionable insights but also serves as a bridge, closing the gap between your content and reader satisfaction.
+
+Formbricks is free and easy to get started with. All you have to do is [create an account](http://formbricks.com/) and you are good to go 🚀
+
+Source for ROI figure: 
+[Omnisend Blog](https://www.omnisend.com/blog/email-marketing-roi/#:~:text=What's%20an%20average%20email%20marketing,%2440%20for%20every%20dollar%20spent.) 
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/blog/why-open-source-no-code-is-the-future-of-enterprise-gov-software/index.mdx

@@ -1,14 +1,11 @@
-import Image from "next/image";
-import LayoutMdx from "@/components/shared/LayoutMdx";
+import AuthorBox from "@/components/shared/AuthorBox";
 import { Callout } from "@/components/shared/Callout";
-import { Logo } from "@/components/shared/Logo";
-import TitleImage from "./title-image.png";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import Image from "next/image";
+import ResponsiveEmbed from "react-responsive-embed";
 import HeaderImage from "./formbricks-logo.svg";
 import ProprietaryDependence from "./propietary-dependence.jpeg";
-import ResponsiveEmbed from "react-responsive-embed";
-import AuthorBox from "@/components/shared/AuthorBox";
-
-
+import TitleImage from "./title-image.png";
 export const meta = {
   title: "Why Open-Source + No-Code is the Future of Enterprise & Goverment Software",
   description: