import Image from "next/image";
import LayoutMdx from "@/components/shared/LayoutMdx";
import NewsletterSignup from "@/components/shared/NewsletterSignup";
import HeaderImage from "../weekly-update-181122/weeklyupdate.png";
import ResponsiveEmbed from "react-responsive-embed";

import Result from "./feedback-result.png";
import Pipeline from "./feedback-pipelines.png";
import CalcomPreview from "./calcom-integration-preview.png";

export const meta = {
  title: "Weekly Summary - 6th Jan 2023",
  description:
    "Happy new year to all of you (and happy birthday to Johannes 🎂). The Feedback Box turned out to be more tricky to embed with a truly native look & feel. Let’s have a look in detail 👇",
  date: "2023-01-06",
};

_Happy new year to all of you (and happy birthday to Johannes 🎂). The Feedback Box turned out to be more tricky to embed with a truly native look & feel. Let’s have a look:_

<Image src={HeaderImage} alt="Weekly Update" className="rounded-lg" />

## Highlights

- Config for styling Feedback Box pop-up shipped
- Pipelines added to XM Dashboard
- PR for [cal.com](http://cal.com) Feedback Box (prototype)
- Right now: Separating wrapper from content
- Johannes moving to Kiel

## Styling the Feedback Box via config

We see potential in building Formbricks as embedded SaaS: Unlike Typeform, we do not try to stand out with a recognizable UI but allow our customers to natively embed the user touch points into their UIs. We do this for two reasons:

- It feels more targeted which leads to higher conversion rates (to be proven)
- Product-minded founders don’t like cluttering their UI

A first start is styling the feedback Box with the config. Here is an example:

```tsx
config: {
        hqUrl: "http://localhost:3000", // or Formbricks Cloud
        formId: "clcg4dewt0000yz267XXXXXX",
        contact: {
          name: "Matti",
          position: "Co-Founder",
          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
        },
        customer: { // are dynamically replaced dependent on respondent
          id: "test@formbricks.com", // helps merging data with analytics insights
          name: "Test Customer", // helps to address users personally in subsequent surveys
          email: "test@formbricks.com", // helps to follow up fast
        },
        style: {
          brandColor: "#00C4B8",
          headerBGColor: "#E5E7EB",
          headerTitleColor: "#4B5563",
          boxBGColor: "#F9FAFB",
          textColor: "#374151",
          buttonHoverColor: "#F3F4F6",
        },
```

The config above spits out the following feedback box. Play around with it!

It's working, feel free to submit your feedback :)

## Pipelines added to XM Dashboard

Reacting rapidly on user feedback gives companies an edge. Until we have built more functionality for handling feedback in our dashboard we added pipelines. Now it’s possible to forward feedback you receive to any destination using email or webhooks.

<Image src={Pipeline} alt="Feedback Pipelines" className="rounded-lg" />

_After all, the modules we built for Formbricks come in handy here and there :)_

## PR at [Cal.com](https://cal.com) repo for Feedback Box

We’ve embedded the prototype of the feedback box into Cal.com and will open a PR in the coming days to get feedback from the team. We aren’t fully satisfied with the result yet: it still feels like an alien element in the UI. To tackle that, we start working on a task we planned for the next use case: separating the form content from the wrapper (see next point).

<Image src={CalcomPreview} alt="Calcom Preview" className="rounded-lg" />

## Seperating wrapper from content

We have to do more tweaking to get to a result which is

- easily embedabble in any web UI and
- easily adaptable to any look & feel
- maintainable

To achieve this, we have to do quite a bit of the groundwork we hoped to postpone until we build out the next best practice: The Product-Market Fit Survey survey. We’ll now separate the content from the wrapper to gain flexibility. Many SaaS products have a standard wrapper we want to be able to easily use for a consistent look & feel.

## Moving to Kiel

Johannes will spend at least two months in Matti’s home town Kiel. While remote work works when it’s very clear what the tasks and goals are, we both felt that it will be beneficial to work closely together to get Formbricks on track.

##

# All the best for 2023 🎆

<NewsletterSignup />

export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;
