mirror of
https://github.com/formbricks/formbricks.git
synced 2026-01-09 00:40:18 -06:00
SEO Health + descriptions
This commit is contained in:
Johannes
@@ -1,8 +1,4 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import clsx from "clsx";
|
||||
import { FooterLogo, Logomark } from "@/components/shared/Logo";
|
||||
import { FooterLogo } from "@/components/shared/Logo";
|
||||
import { MobileNavigation } from "@/components/shared/MobileNavigation";
|
||||
import { Navigation } from "@/components/shared/Navigation";
|
||||
import { Prose } from "@/components/shared/Prose";
|
||||
@@ -10,6 +6,10 @@ import { Search } from "@/components/shared/Search";
|
||||
import { ThemeSelector } from "@/components/shared/ThemeSelector";
|
||||
import navigation from "@/lib/docsNavigation";
|
||||
import { Button } from "@formbricks/ui";
|
||||
import clsx from "clsx";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import MetaInformation from "../shared/MetaInformation";
|
||||
|
||||
function GitHubIcon(props: any) {
|
||||
@@ -78,6 +78,7 @@ interface LayoutProps {
|
||||
children: React.ReactNode;
|
||||
meta: {
|
||||
title: string;
|
||||
description?: string;
|
||||
};
|
||||
}
|
||||
|
||||
@@ -93,21 +94,23 @@ export function Layout({ children, meta }: LayoutProps) {
|
||||
return (
|
||||
<>
|
||||
<MetaInformation
|
||||
title="Formbricks Documentation"
|
||||
description="Open-source Experience Management for Digital Products."
|
||||
title={`Formbricks Docs | ${meta.title}`}
|
||||
description={
|
||||
meta.description ? meta.description : "Open-source Experience Management for Digital Products."
|
||||
}
|
||||
/>
|
||||
<Header navigation={navigation} />
|
||||
|
||||
<div className="max-w-8xl relative mx-auto flex justify-center sm:px-2 lg:px-8 xl:px-12">
|
||||
<div className="hidden lg:relative lg:block lg:flex-none">
|
||||
<div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
|
||||
<div className="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
|
||||
<div className="absolute top-28 bottom-0 right-0 hidden w-px bg-slate-800 dark:block" />
|
||||
<div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
|
||||
<div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
|
||||
<div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto overflow-x-hidden py-16 pl-0.5">
|
||||
<Navigation navigation={navigation} className="w-64 pr-8 xl:w-72 xl:pr-16" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16">
|
||||
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
|
||||
<article>
|
||||
{(meta.title || section) && (
|
||||
<header className="mb-9 space-y-1">
|
||||
|
||||
@@ -3,21 +3,6 @@ import clsx from "clsx";
|
||||
import { FooterLogo } from "./Logo";
|
||||
|
||||
const navigation = {
|
||||
/* creation: [
|
||||
{ name: "React Form Builder", href: "/react-form-library", status: true },
|
||||
{ name: "No-Code Builder", href: "/visual-builder", status: false },
|
||||
{ name: "Templates", href: "#", status: false },
|
||||
],
|
||||
pipelines: [
|
||||
{ name: "Core API", href: "/core-api", status: true },
|
||||
{ name: "Webhooks", href: "/webhooks", status: true },
|
||||
{ name: "Email", href: "/email", status: true },
|
||||
{ name: "Integrations", href: "#", status: false },
|
||||
],
|
||||
insights: [
|
||||
{ name: "Formbricks HQ", href: "/formbricks-hq", status: true },
|
||||
{ name: "Reports", href: "#", status: false },
|
||||
], */
|
||||
other: [
|
||||
{ name: "Community", href: "/community", status: true },
|
||||
{ name: "Blog", href: "/blog", status: true },
|
||||
@@ -58,7 +43,7 @@ export default function Footer() {
|
||||
<h2 id="footer-heading" className="sr-only">
|
||||
Footer
|
||||
</h2>
|
||||
<div className="mx-auto flex max-w-7xl flex-col space-y-6 px-4 py-12 text-center sm:px-6 lg:py-16 lg:px-8">
|
||||
<div className="mx-auto flex max-w-7xl flex-col space-y-6 px-4 py-12 text-center sm:px-6 lg:px-8 lg:py-16">
|
||||
<Link href="/">
|
||||
<span className="sr-only">Formbricks</span>
|
||||
<FooterLogo className="mx-auto h-8 w-auto sm:h-10" />
|
||||
|
||||
@@ -12,57 +12,57 @@ const nextConfig = {
|
||||
{
|
||||
source: "/discord",
|
||||
destination: "https://discord.gg/3YFcABF2Ts",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/roadmap",
|
||||
destination: "https://github.com/orgs/formbricks/projects/1",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/github",
|
||||
destination: "https://github.com/formbricks/formbricks",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/privacy",
|
||||
destination: "/privacy-policy",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/form-hq",
|
||||
destination: "/formbricks-hq",
|
||||
permanent: false,
|
||||
destination: "/",
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs",
|
||||
destination: "/docs/introduction/what-is-formbricks",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/formbricks-hq/self-hosting",
|
||||
destination: "/docs",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/react-form-library/getting-started",
|
||||
destination: "/docs",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/react-form-library/work-with-components",
|
||||
destination: "/docs",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/react-form-library/introduction",
|
||||
destination: "/docs",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/docs/formbricks-hq/schema",
|
||||
destination: "/docs",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/demo",
|
||||
@@ -72,12 +72,12 @@ const nextConfig = {
|
||||
{
|
||||
source: "/pmf",
|
||||
destination: "/",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
{
|
||||
source: "/signup",
|
||||
destination: "/auth/signup",
|
||||
permanent: false,
|
||||
permanent: true,
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
@@ -94,8 +94,8 @@ The first step is building the React Form Builder into a full-fledged product. W
|
||||
|
||||
Alongside the React Form Builder we'll redesign our Core API. You'll be able to:
|
||||
|
||||
- Send any form to our API endpoint to view and manage submissions on [formbricks.com](/formbricks-hq)
|
||||
- Forward your data however you like: [Email](/email), [webhooks](/webhooks), 3rd party integrations
|
||||
- Send any form to our API endpoint to view and manage submissions on [formbricks.com](https://app.formbricks.com)
|
||||
- Forward your data however you like: Email, Webhooks, 3rd party integrations
|
||||
|
||||
Please [join our Discord](https://discord.com/invite/3YFcABF2Ts) to provide feedback on what's important to you!
|
||||
|
||||
|
||||
@@ -5,6 +5,8 @@ import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
export const meta = {
|
||||
title: "API Key Setup",
|
||||
description:
|
||||
"Generate, store, and delete personal API keys for secure Formbricks access. Ensure safekeeping to prevent unauthorized account control.",
|
||||
};
|
||||
|
||||
## Auth: Personal API key
|
||||
@@ -13,10 +15,10 @@ The API requests are authorized with a personal API key. This API key gives you
|
||||
|
||||
### How to generate an API key
|
||||
|
||||
1. Go to your profile at [app.formbricks.com](https://app.formbricks.com/app/me/settings).
|
||||
2. Select “Add key”.
|
||||
3. Label it (this is just for you).
|
||||
4. Copy the key. You won’t be able to see it again.
|
||||
1. Go to your settings on [app.formbricks.com](https://app.formbricks.com/app/me/settings).
|
||||
2. Go to page “API keys”.
|
||||
3. Create a key for the development or production environment.
|
||||
4. Copy the key immediately. You won’t be able to see it again.
|
||||
|
||||
<Callout title="Store API key safely" type="warning">
|
||||
Anyone who has your API key has full control over your account. For security reasons, you cannot view the
|
||||
@@ -25,8 +27,9 @@ The API requests are authorized with a personal API key. This API key gives you
|
||||
|
||||
### Delete a personal API key
|
||||
|
||||
1. Go to your profile at [app.formbricks.com](https://app.formbricks.com/app/me/settings).
|
||||
2. Find the key you wish to revoke and select “Delete”.
|
||||
3. Your API key will stop working immediately.
|
||||
1. Go to settings on [app.formbricks.com](https://app.formbricks.com/app/me/settings).
|
||||
2. Go to page “API keys”.
|
||||
3. Find the key you wish to revoke and select “Delete”.
|
||||
4. Your API key will stop working immediately.
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API: Create response",
|
||||
description: "Learn how to create a new response to a survey via API.",
|
||||
};
|
||||
|
||||
<APILayout
|
||||
|
||||
@@ -4,6 +4,8 @@ import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API Overview",
|
||||
description:
|
||||
"Explore Formbricks' APIs: Public Client API for client-side tasks, and User API for account management with secure API Key authentication.",
|
||||
};
|
||||
|
||||
Formbricks offers two types of APIs: the Public Client API and the User API. Each API serves a different purpose, has different authentication requirements, and provides access to different data and settings.
|
||||
|
||||
@@ -4,6 +4,7 @@ import { APILayout } from "@/components/shared/APILayout.tsx";
|
||||
|
||||
export const meta = {
|
||||
title: "API: Update submission",
|
||||
description: "Learn how to update a new response to a survey via API.",
|
||||
};
|
||||
|
||||
<APILayout
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting attributes with code",
|
||||
description:
|
||||
"Set attributes in code using setAttribute function. Enhance user segmentation, target surveys effectively, and gather valuable insights for better decisions. All open-source.",
|
||||
};
|
||||
|
||||
One way to send attributes to Formbricks is in your code. In Formbricks, there are two special attributes for [user identification](/docs/attributes/identify-users)(user ID & email) and custom attributes. An example:
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Identifying Users",
|
||||
description:
|
||||
"Identify users with Formbricks by setting User ID, email, and custom attributes. Enhance survey targeting and recontacting while maintaining user privacy.",
|
||||
};
|
||||
|
||||
At Formbricks, we value user privacy. By default, Formbricks doesn't collect or store any personal information from your users. However, we understand that it can be helpful for you to know which user submitted the feedback and also functionality like recontacting users and controlling the waiting period between surveys requires identifying the users. That's why we provide a way for you to share existing user data from your app, so you can view it in our dashboard.
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "What are attributes and why are they useful?",
|
||||
description:
|
||||
"How to use attributes for user segmentation, enhancing survey targeting & results. Improve feedback quality and make data-driven decisions.",
|
||||
};
|
||||
|
||||
Surveying your user base without segmentation leads to weak results and survey fatigue. Attributes help you segment your users into groups.
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Code Events",
|
||||
description:
|
||||
"Integrate code events in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
|
||||
};
|
||||
|
||||
Events can also be set in the code base. You can fire an event using `formbricks.track()`
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "No-Code Events",
|
||||
description:
|
||||
"Utilize Formbricks' No-Code Events like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
|
||||
};
|
||||
|
||||
No-Code events can be set up within Formbricks with just a few clicks. There are three types of No-Code events:
|
||||
@@ -17,12 +19,12 @@ The page URL event is triggered, when a user visits a specific page in your appl
|
||||
- `notMatch`: The URL should not match the specified condition.
|
||||
- `notContains`: The URL should not contain the specified string as a substring.
|
||||
|
||||
## innerText Event (coming soon)
|
||||
## innerText Event
|
||||
|
||||
The innerText event checks if the `innerText` of a clicked HTML element matches a specific text, e.g. the label of a button.
|
||||
The innerText event checks if the `innerText` of a clicked HTML element matches a specific text, e.g. the label of a button. Display a survey on any button click!
|
||||
|
||||
## CSS Selector Event (coming soon)
|
||||
## CSS Selector Event
|
||||
|
||||
The CSS Selector event checks if the provided CSS selector matches the selector of a clicked HTML element. The CSS selector can be a class, id or any other CSS selector within your website.
|
||||
The CSS Selector event checks if the provided CSS selector matches the selector of a clicked HTML element. The CSS selector can be a class, id or any other CSS selector within your website. Display a survey on any element click!
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "What are events and why are they useful?",
|
||||
description:
|
||||
"Events in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking events for granular surveying.",
|
||||
};
|
||||
|
||||
You want to understand what your users think and feel during specific moments in the user journey. To be able to ask at exactly the right point in time, you need events.
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with Next.js",
|
||||
description: "Integrate Formbricks SDK into your Next.js app for seamless in-product micro-surveys. Follow our step-by-step guide to enhance user feedback and product experience.",
|
||||
};
|
||||
|
||||
This guide will walk you through the process of integrating the Formbricks SDK into a Next.js application. As the Formbricks SDK only works on the client side, it's essential to ensure proper integration to avoid any issues.
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Quickstart",
|
||||
description:
|
||||
"Get started with Formbricks: Choose self-hosted or cloud, create an account, and follow our quickstart guide to set up in-product micro-surveys with ease.",
|
||||
};
|
||||
|
||||
Welcome to Formbricks! In this quickstart guide, we'll walk you through the initial steps to get up and running with our in-product micro-surveys. Choose between self-hosted and cloud options, create an account, and set up the JavaScript widget. Let's dive in!
|
||||
|
||||
@@ -2,6 +2,8 @@ import { Layout } from "@/components/docs/Layout";
|
||||
|
||||
export const meta = {
|
||||
title: "Setting up Formbricks SDK with Vue.js",
|
||||
description:
|
||||
"Easily integrate Formbricks SDK into your Vue.js app with our guide. Enhance user feedback and improve product experience with customizable in-product micro-surveys.",
|
||||
};
|
||||
|
||||
In this guide, we will go through the steps to set up the Formbricks SDK in a Vue.js application. This will allow you to create and customize in-product micro-surveys to gather valuable feedback from your users and improve your product experience.
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Fence } from "@/components/shared/Fence";
|
||||
|
||||
export const meta = {
|
||||
title: "How Formbricks works",
|
||||
description:
|
||||
"Master in-product micro-surveys with Formbricks: user-friendly form builder, precise targeting, seamless integration, and insightful analytics for SaaS products.",
|
||||
};
|
||||
|
||||
Formbricks is a powerful platform designed to help you create and manage in-product micro-surveys for SaaS and digital products. Here is an overview:
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Fence } from "@/components/shared/Fence";
|
||||
|
||||
export const meta = {
|
||||
title: "What is Formbricks?",
|
||||
description:
|
||||
"Supercharge your SaaS with Formbricks: in-product micro-surveys, seamless integration, powerful analytics, and open-source control. Elevate your user experience today!",
|
||||
};
|
||||
|
||||
Welcome to Formbricks, your go-to solution for in-product micro-surveys that will supercharge your product experience! 🚀
|
||||
|
||||
@@ -3,6 +3,8 @@ import { Fence } from "@/components/shared/Fence";
|
||||
|
||||
export const meta = {
|
||||
title: "Why is Formbricks better?",
|
||||
description:
|
||||
"The ultimate survey solution for SaaS, offering in-depth micro-surveys, precise targeting, and seamless integrations. Discover the difference today!",
|
||||
};
|
||||
|
||||
Formbricks outshines other survey tools by specializing in in-product micro-surveys for SaaS and digital products. With Formbricks, you're better equipped to understand user behavior, improve your product, and make data-driven decisions. Let's see how Formbricks compares to generic survey tools.
|
||||
|
||||
@@ -4,6 +4,8 @@ import { Callout } from "@/components/shared/Callout";
|
||||
|
||||
export const meta = {
|
||||
title: "Deploying Formbricks to production",
|
||||
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.",
|
||||
};
|
||||
|
||||
<Callout title="Public Beta" type="warning">
|
||||
|
||||
@@ -25,7 +25,7 @@ A form or survey always consists of two parts: The form facing your respondents
|
||||
|
||||
### Backend-as-a-Service for forms and surveys
|
||||
|
||||
Our [React Form Builder](/react-form-library) makes it super easy to build custom forms rapidly with. Today, we’ll talk about how the Formbricks [Core API](/core-api) + [Formbricks HQ](/formbricks-hq) completely eliminate the need to setup your own backend to receive, manage and analyze submissions from forms and surveys.
|
||||
Our [React Form Builder](/react-form-library) makes it super easy to build custom forms rapidly with. Today, we’ll talk about how the [Formbricks Cloud](https://app.formbricks.com).
|
||||
|
||||
### How to receive form responses without a backend
|
||||
|
||||
|
||||
Reference in New Issue
Block a user