mirror of
https://github.com/formbricks/formbricks.git
synced 2025-12-30 02:10:12 -06:00
feat: migration to new docs
This commit is contained in:
ShubhamPalriwala
@@ -1,82 +0,0 @@
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
|
||||
function ArrowIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
const variantStyles = {
|
||||
primary:
|
||||
'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-1 dark:ring-inset dark:ring-emerald-400/20 dark:hover:bg-emerald-400/10 dark:hover:text-emerald-300 dark:hover:ring-emerald-300',
|
||||
secondary:
|
||||
'rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300',
|
||||
filled:
|
||||
'rounded-full bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700 dark:bg-emerald-500 dark:text-white dark:hover:bg-emerald-400',
|
||||
outline:
|
||||
'rounded-full py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:ring-white/10 dark:hover:bg-white/5 dark:hover:text-white',
|
||||
text: 'text-emerald-500 hover:text-emerald-600 dark:text-emerald-400 dark:hover:text-emerald-500',
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
variant?: keyof typeof variantStyles
|
||||
arrow?: 'left' | 'right'
|
||||
} & (
|
||||
| React.ComponentPropsWithoutRef<typeof Link>
|
||||
| (React.ComponentPropsWithoutRef<'button'> & { href?: undefined })
|
||||
)
|
||||
|
||||
export function Button({
|
||||
variant = 'primary',
|
||||
className,
|
||||
children,
|
||||
arrow,
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
className = clsx(
|
||||
'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
|
||||
variantStyles[variant],
|
||||
className,
|
||||
)
|
||||
|
||||
let arrowIcon = (
|
||||
<ArrowIcon
|
||||
className={clsx(
|
||||
'mt-0.5 h-5 w-5',
|
||||
variant === 'text' && 'relative top-px',
|
||||
arrow === 'left' && '-ml-1 rotate-180',
|
||||
arrow === 'right' && '-mr-1',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
let inner = (
|
||||
<>
|
||||
{arrow === 'left' && arrowIcon}
|
||||
{children}
|
||||
{arrow === 'right' && arrowIcon}
|
||||
</>
|
||||
)
|
||||
|
||||
if (typeof props.href === 'undefined') {
|
||||
return (
|
||||
<button className={className} {...props}>
|
||||
{inner}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Link className={className} {...props}>
|
||||
{inner}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -1,376 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
Children,
|
||||
createContext,
|
||||
isValidElement,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { Tab } from '@headlessui/react'
|
||||
import clsx from 'clsx'
|
||||
import { create } from 'zustand'
|
||||
|
||||
import { Tag } from '@/app/docs/_components/Tag'
|
||||
|
||||
const languageNames: Record<string, string> = {
|
||||
js: 'JavaScript',
|
||||
ts: 'TypeScript',
|
||||
javascript: 'JavaScript',
|
||||
typescript: 'TypeScript',
|
||||
php: 'PHP',
|
||||
python: 'Python',
|
||||
ruby: 'Ruby',
|
||||
go: 'Go',
|
||||
}
|
||||
|
||||
function getPanelTitle({
|
||||
title,
|
||||
language,
|
||||
}: {
|
||||
title?: string
|
||||
language?: string
|
||||
}) {
|
||||
if (title) {
|
||||
return title
|
||||
}
|
||||
if (language && language in languageNames) {
|
||||
return languageNames[language]
|
||||
}
|
||||
return 'Code'
|
||||
}
|
||||
|
||||
function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
|
||||
<path
|
||||
strokeWidth="0"
|
||||
d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
|
||||
/>
|
||||
<path
|
||||
fill="none"
|
||||
strokeLinejoin="round"
|
||||
d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function CopyButton({ code }: { code: string }) {
|
||||
let [copyCount, setCopyCount] = useState(0)
|
||||
let copied = copyCount > 0
|
||||
|
||||
useEffect(() => {
|
||||
if (copyCount > 0) {
|
||||
let timeout = setTimeout(() => setCopyCount(0), 1000)
|
||||
return () => {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}
|
||||
}, [copyCount])
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={clsx(
|
||||
'group/button absolute right-4 top-3.5 overflow-hidden rounded-full py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100',
|
||||
copied
|
||||
? 'bg-emerald-400/10 ring-1 ring-inset ring-emerald-400/20'
|
||||
: 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5'
|
||||
)}
|
||||
onClick={() => {
|
||||
window.navigator.clipboard.writeText(code).then(() => {
|
||||
setCopyCount((count) => count + 1)
|
||||
})
|
||||
}}
|
||||
>
|
||||
<span
|
||||
aria-hidden={copied}
|
||||
className={clsx(
|
||||
'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
|
||||
copied && '-translate-y-1.5 opacity-0'
|
||||
)}
|
||||
>
|
||||
<ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
|
||||
Copy
|
||||
</span>
|
||||
<span
|
||||
aria-hidden={!copied}
|
||||
className={clsx(
|
||||
'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300',
|
||||
!copied && 'translate-y-1.5 opacity-0'
|
||||
)}
|
||||
>
|
||||
Copied!
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function CodePanelHeader({ tag, label }: { tag?: string; label?: string }) {
|
||||
if (!tag && !label) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-9 items-center gap-2 border-y border-b-white/7.5 border-t-transparent bg-white/2.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
|
||||
{tag && (
|
||||
<div className="dark flex">
|
||||
<Tag variant="small">{tag}</Tag>
|
||||
</div>
|
||||
)}
|
||||
{tag && label && (
|
||||
<span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
|
||||
)}
|
||||
{label && (
|
||||
<span className="font-mono text-xs text-zinc-400">{label}</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CodePanel({
|
||||
children,
|
||||
tag,
|
||||
label,
|
||||
code,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
tag?: string
|
||||
label?: string
|
||||
code?: string
|
||||
}) {
|
||||
let child = Children.only(children)
|
||||
|
||||
if (isValidElement(child)) {
|
||||
tag = child.props.tag ?? tag
|
||||
label = child.props.label ?? label
|
||||
code = child.props.code ?? code
|
||||
}
|
||||
|
||||
if (!code) {
|
||||
throw new Error(
|
||||
'`CodePanel` requires a `code` prop, or a child with a `code` prop.'
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group dark:bg-white/2.5">
|
||||
<CodePanelHeader tag={tag} label={label} />
|
||||
<div className="relative">
|
||||
<pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
|
||||
<CopyButton code={code} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CodeGroupHeader({
|
||||
title,
|
||||
children,
|
||||
selectedIndex,
|
||||
}: {
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
selectedIndex: number
|
||||
}) {
|
||||
let hasTabs = Children.count(children) > 1
|
||||
|
||||
if (!title && !hasTabs) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
|
||||
{title && (
|
||||
<h3 className="mr-auto pt-3 text-xs font-semibold text-white">
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
{hasTabs && (
|
||||
<Tab.List className="-mb-px flex gap-4 text-xs font-medium">
|
||||
{Children.map(children, (child, childIndex) => (
|
||||
<Tab
|
||||
className={clsx(
|
||||
'border-b py-3 transition ui-not-focus-visible:outline-none',
|
||||
childIndex === selectedIndex
|
||||
? 'border-emerald-500 text-emerald-400'
|
||||
: 'border-transparent text-zinc-400 hover:text-zinc-300'
|
||||
)}
|
||||
>
|
||||
{getPanelTitle(isValidElement(child) ? child.props : {})}
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CodeGroupPanels({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CodePanel>) {
|
||||
let hasTabs = Children.count(children) > 1
|
||||
|
||||
if (hasTabs) {
|
||||
return (
|
||||
<Tab.Panels>
|
||||
{Children.map(children, (child) => (
|
||||
<Tab.Panel>
|
||||
<CodePanel {...props}>{child}</CodePanel>
|
||||
</Tab.Panel>
|
||||
))}
|
||||
</Tab.Panels>
|
||||
)
|
||||
}
|
||||
|
||||
return <CodePanel {...props}>{children}</CodePanel>
|
||||
}
|
||||
|
||||
function usePreventLayoutShift() {
|
||||
let positionRef = useRef<HTMLElement>(null)
|
||||
let rafRef = useRef<number>()
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (typeof rafRef.current !== 'undefined') {
|
||||
window.cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return {
|
||||
positionRef,
|
||||
preventLayoutShift(callback: () => void) {
|
||||
if (!positionRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
let initialTop = positionRef.current.getBoundingClientRect().top
|
||||
|
||||
callback()
|
||||
|
||||
rafRef.current = window.requestAnimationFrame(() => {
|
||||
let newTop =
|
||||
positionRef.current?.getBoundingClientRect().top ?? initialTop
|
||||
window.scrollBy(0, newTop - initialTop)
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const usePreferredLanguageStore = create<{
|
||||
preferredLanguages: Array<string>
|
||||
addPreferredLanguage: (language: string) => void
|
||||
}>()((set) => ({
|
||||
preferredLanguages: [],
|
||||
addPreferredLanguage: (language) =>
|
||||
set((state) => ({
|
||||
preferredLanguages: [
|
||||
...state.preferredLanguages.filter(
|
||||
(preferredLanguage) => preferredLanguage !== language
|
||||
),
|
||||
language,
|
||||
],
|
||||
})),
|
||||
}))
|
||||
|
||||
function useTabGroupProps(availableLanguages: Array<string>) {
|
||||
let { preferredLanguages, addPreferredLanguage } = usePreferredLanguageStore()
|
||||
let [selectedIndex, setSelectedIndex] = useState(0)
|
||||
let activeLanguage = [...availableLanguages].sort(
|
||||
(a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a)
|
||||
)[0]
|
||||
let languageIndex = availableLanguages.indexOf(activeLanguage)
|
||||
let newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
|
||||
if (newSelectedIndex !== selectedIndex) {
|
||||
setSelectedIndex(newSelectedIndex)
|
||||
}
|
||||
|
||||
let { positionRef, preventLayoutShift } = usePreventLayoutShift()
|
||||
|
||||
return {
|
||||
as: 'div' as const,
|
||||
ref: positionRef,
|
||||
selectedIndex,
|
||||
onChange: (newSelectedIndex: number) => {
|
||||
preventLayoutShift(() =>
|
||||
addPreferredLanguage(availableLanguages[newSelectedIndex])
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const CodeGroupContext = createContext(false)
|
||||
|
||||
export function CodeGroup({
|
||||
children,
|
||||
title,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
|
||||
let languages =
|
||||
Children.map(children, (child) =>
|
||||
getPanelTitle(isValidElement(child) ? child.props : {})
|
||||
) ?? []
|
||||
let tabGroupProps = useTabGroupProps(languages)
|
||||
let hasTabs = Children.count(children) > 1
|
||||
|
||||
let containerClassName =
|
||||
'not-prose my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10'
|
||||
let header = (
|
||||
<CodeGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
|
||||
{children}
|
||||
</CodeGroupHeader>
|
||||
)
|
||||
let panels = <CodeGroupPanels {...props}>{children}</CodeGroupPanels>
|
||||
|
||||
return (
|
||||
<CodeGroupContext.Provider value={true}>
|
||||
{hasTabs ? (
|
||||
<Tab.Group {...tabGroupProps} className={containerClassName}>
|
||||
{header}
|
||||
{panels}
|
||||
</Tab.Group>
|
||||
) : (
|
||||
<div className={containerClassName}>
|
||||
{header}
|
||||
{panels}
|
||||
</div>
|
||||
)}
|
||||
</CodeGroupContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function Code({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<'code'>) {
|
||||
let isGrouped = useContext(CodeGroupContext)
|
||||
|
||||
if (isGrouped) {
|
||||
if (typeof children !== 'string') {
|
||||
throw new Error(
|
||||
'`Code` children must be a string when nested inside a `CodeGroup`.'
|
||||
)
|
||||
}
|
||||
return <code {...props} dangerouslySetInnerHTML={{ __html: children }} />
|
||||
}
|
||||
|
||||
return <code {...props}>{children}</code>
|
||||
}
|
||||
|
||||
export function Pre({
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentPropsWithoutRef<typeof CodeGroup>) {
|
||||
let isGrouped = useContext(CodeGroupContext)
|
||||
|
||||
if (isGrouped) {
|
||||
return children
|
||||
}
|
||||
|
||||
return <CodeGroup {...props}>{children}</CodeGroup>
|
||||
}
|
||||
@@ -1,105 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { forwardRef, Fragment, useState } from 'react'
|
||||
import { Transition } from '@headlessui/react'
|
||||
|
||||
function CheckIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
|
||||
<circle cx="10" cy="10" r="10" strokeWidth="0" />
|
||||
<path
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="1.5"
|
||||
d="m6.75 10.813 2.438 2.437c1.218-4.469 4.062-6.5 4.062-6.5"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function FeedbackButton(
|
||||
props: Omit<React.ComponentPropsWithoutRef<'button'>, 'type' | 'className'>,
|
||||
) {
|
||||
return (
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 text-sm font-medium text-zinc-600 transition hover:bg-zinc-900/2.5 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const FeedbackForm = forwardRef<
|
||||
React.ElementRef<'form'>,
|
||||
Pick<React.ComponentPropsWithoutRef<'form'>, 'onSubmit'>
|
||||
>(function FeedbackForm({ onSubmit }, ref) {
|
||||
return (
|
||||
<form
|
||||
ref={ref}
|
||||
onSubmit={onSubmit}
|
||||
className="absolute inset-0 flex items-center justify-center gap-6 md:justify-start"
|
||||
>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-400">
|
||||
Was this page helpful?
|
||||
</p>
|
||||
<div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-full border border-zinc-900/10 dark:border-white/10">
|
||||
<FeedbackButton data-response="yes">Yes</FeedbackButton>
|
||||
<div className="bg-zinc-900/10 dark:bg-white/10" />
|
||||
<FeedbackButton data-response="no">No</FeedbackButton>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
})
|
||||
|
||||
const FeedbackThanks = forwardRef<React.ElementRef<'div'>>(
|
||||
function FeedbackThanks(_props, ref) {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className="absolute inset-0 flex justify-center md:justify-start"
|
||||
>
|
||||
<div className="flex items-center gap-3 rounded-full bg-emerald-50/50 py-1 pl-1.5 pr-3 text-sm text-emerald-900 ring-1 ring-inset ring-emerald-500/20 dark:bg-emerald-500/5 dark:text-emerald-200 dark:ring-emerald-500/30">
|
||||
<CheckIcon className="h-5 w-5 flex-none fill-emerald-500 stroke-white dark:fill-emerald-200/20 dark:stroke-emerald-200" />
|
||||
Thanks for your feedback!
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export function Feedback() {
|
||||
let [submitted, setSubmitted] = useState(false)
|
||||
|
||||
function onSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault()
|
||||
|
||||
// event.nativeEvent.submitter.dataset.response
|
||||
// => "yes" or "no"
|
||||
|
||||
setSubmitted(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative h-8">
|
||||
<Transition
|
||||
show={!submitted}
|
||||
as={Fragment}
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
leave="pointer-events-none duration-300"
|
||||
>
|
||||
<FeedbackForm onSubmit={onSubmit} />
|
||||
</Transition>
|
||||
<Transition
|
||||
show={submitted}
|
||||
as={Fragment}
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
enter="delay-150 duration-300"
|
||||
>
|
||||
<FeedbackThanks />
|
||||
</Transition>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import { Button } from '@/app/docs/_components/Button'
|
||||
import { Heading } from '@/app/docs/_components/Heading'
|
||||
|
||||
const guides = [
|
||||
{
|
||||
href: '/docs/authentication',
|
||||
name: 'Authentication',
|
||||
description: 'Learn how to authenticate your API requests.',
|
||||
},
|
||||
{
|
||||
href: '/docs/pagination',
|
||||
name: 'Pagination',
|
||||
description: 'Understand how to work with paginated responses.',
|
||||
},
|
||||
{
|
||||
href: '/docs/errors',
|
||||
name: 'Errors',
|
||||
description:
|
||||
'Read about the different types of errors returned by the API.',
|
||||
},
|
||||
{
|
||||
href: '/docs/webhooks',
|
||||
name: 'Webhooks',
|
||||
description:
|
||||
'Learn how to programmatically configure webhooks for your app.',
|
||||
},
|
||||
]
|
||||
|
||||
export function Guides() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<Heading level={2} id="guides">
|
||||
Guides
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{guides.map((guide) => (
|
||||
<div key={guide.href}>
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{guide.name}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{guide.description}
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<Button href={guide.href} variant="text" arrow="right">
|
||||
Read more
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { forwardRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import clsx from 'clsx'
|
||||
import { motion, useScroll, useTransform } from 'framer-motion'
|
||||
|
||||
import { Button } from '@/app/docs/_components/Button'
|
||||
import { Logo } from '@/app/docs/_components/Logo'
|
||||
import {
|
||||
MobileNavigation,
|
||||
useIsInsideMobileNavigation,
|
||||
} from '@/app/docs/_components/MobileNavigation'
|
||||
import { useMobileNavigationStore } from '@/app/docs/_components/MobileNavigation'
|
||||
import { MobileSearch, Search } from '@/app/docs/_components/Search'
|
||||
import { ThemeToggle } from '@/app/docs/_components/ThemeToggle'
|
||||
|
||||
function TopLevelNavItem({
|
||||
href,
|
||||
children,
|
||||
}: {
|
||||
href: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<li>
|
||||
<Link
|
||||
href={href}
|
||||
className="text-sm leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const Header = forwardRef<
|
||||
React.ElementRef<'div'>,
|
||||
{ className?: string }
|
||||
>(function Header({ className }, ref) {
|
||||
let { isOpen: mobileNavIsOpen } = useMobileNavigationStore()
|
||||
let isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
|
||||
let { scrollY } = useScroll()
|
||||
let bgOpacityLight = useTransform(scrollY, [0, 72], [0.5, 0.9])
|
||||
let bgOpacityDark = useTransform(scrollY, [0, 72], [0.2, 0.8])
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={ref}
|
||||
className={clsx(
|
||||
className,
|
||||
'fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-12 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80',
|
||||
!isInsideMobileNavigation &&
|
||||
'backdrop-blur-sm dark:backdrop-blur lg:left-72 xl:left-80',
|
||||
isInsideMobileNavigation
|
||||
? 'bg-white dark:bg-zinc-900'
|
||||
: 'bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]'
|
||||
)}
|
||||
style={
|
||||
{
|
||||
'--bg-opacity-light': bgOpacityLight,
|
||||
'--bg-opacity-dark': bgOpacityDark,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute inset-x-0 top-full h-px transition',
|
||||
(isInsideMobileNavigation || !mobileNavIsOpen) &&
|
||||
'bg-zinc-900/7.5 dark:bg-white/7.5'
|
||||
)}
|
||||
/>
|
||||
<Search />
|
||||
<div className="flex items-center gap-5 lg:hidden">
|
||||
<MobileNavigation />
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="h-6" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-5">
|
||||
<nav className="hidden md:block">
|
||||
<ul role="list" className="flex items-center gap-8">
|
||||
<TopLevelNavItem href="/">API</TopLevelNavItem>
|
||||
<TopLevelNavItem href="#">Documentation</TopLevelNavItem>
|
||||
<TopLevelNavItem href="#">Support</TopLevelNavItem>
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
|
||||
<div className="flex gap-4">
|
||||
<MobileSearch />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div className="hidden min-[416px]:contents">
|
||||
<Button href="#">Sign in</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
})
|
||||
@@ -1,49 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import { Footer } from '@/app/docs/_components/Footer'
|
||||
import { Header } from '@/app/docs/_components/Header'
|
||||
import { Logo } from '@/app/docs/_components/Logo'
|
||||
import { Navigation } from '@/app/docs/_components/Navigation'
|
||||
import {
|
||||
type Section,
|
||||
SectionProvider,
|
||||
} from '@/app/docs/_components/SectionProvider'
|
||||
|
||||
export function Layout({
|
||||
children,
|
||||
allSections,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
allSections: Record<string, Array<Section>>
|
||||
}) {
|
||||
let pathname = usePathname()
|
||||
|
||||
return (
|
||||
<SectionProvider sections={allSections[pathname] ?? []}>
|
||||
<div className="h-full lg:ml-72 xl:ml-80">
|
||||
<motion.header
|
||||
layoutScroll
|
||||
className="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
|
||||
>
|
||||
<div className="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 lg:px-6 lg:pb-8 lg:pt-4 lg:dark:border-white/10 xl:w-80">
|
||||
<div className="hidden lg:flex">
|
||||
<Link href="/" aria-label="Home">
|
||||
<Logo className="h-6" />
|
||||
</Link>
|
||||
</div>
|
||||
<Header />
|
||||
<Navigation className="hidden lg:mt-10 lg:block" />
|
||||
</div>
|
||||
</motion.header>
|
||||
<div className="relative flex h-full flex-col px-4 pt-14 sm:px-6 lg:px-8">
|
||||
<main className="flex-auto">{children}</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
</SectionProvider>
|
||||
)
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import Image from 'next/image'
|
||||
|
||||
import { Button } from '@/app/docs/_components/Button'
|
||||
import { Heading } from '@/app/docs/_components/Heading'
|
||||
import logoGo from '@/images/logos/go.svg'
|
||||
import logoNode from '@/images/logos/node.svg'
|
||||
import logoPhp from '@/images/logos/php.svg'
|
||||
import logoPython from '@/images/logos/python.svg'
|
||||
import logoRuby from '@/images/logos/ruby.svg'
|
||||
|
||||
const libraries = [
|
||||
{
|
||||
href: '#',
|
||||
name: 'PHP',
|
||||
description:
|
||||
'A popular general-purpose scripting language that is especially suited to web development.',
|
||||
logo: logoPhp,
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
name: 'Ruby',
|
||||
description:
|
||||
'A dynamic, open source programming language with a focus on simplicity and productivity.',
|
||||
logo: logoRuby,
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
name: 'Node.js',
|
||||
description:
|
||||
'Node.js® is an open-source, cross-platform JavaScript runtime environment.',
|
||||
logo: logoNode,
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
name: 'Python',
|
||||
description:
|
||||
'Python is a programming language that lets you work quickly and integrate systems more effectively.',
|
||||
logo: logoPython,
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
name: 'Go',
|
||||
description:
|
||||
'An open-source programming language supported by Google with built-in concurrency.',
|
||||
logo: logoGo,
|
||||
},
|
||||
]
|
||||
|
||||
export function Libraries() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<Heading level={2} id="official-libraries">
|
||||
Official libraries
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:max-w-none xl:grid-cols-3">
|
||||
{libraries.map((library) => (
|
||||
<div key={library.name} className="flex flex-row-reverse gap-6">
|
||||
<div className="flex-auto">
|
||||
<h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
|
||||
{library.name}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{library.description}
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
<Button href={library.href} variant="text" arrow="right">
|
||||
Read more
|
||||
</Button>
|
||||
</p>
|
||||
</div>
|
||||
<Image
|
||||
src={library.logo}
|
||||
alt=""
|
||||
className="h-12 w-12"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
return (
|
||||
<svg viewBox="0 0 99 24" aria-hidden="true" {...props}>
|
||||
<path
|
||||
className="fill-emerald-400"
|
||||
d="M16 8a5 5 0 0 0-5-5H5a5 5 0 0 0-5 5v13.927a1 1 0 0 0 1.623.782l3.684-2.93a4 4 0 0 1 2.49-.87H11a5 5 0 0 0 5-5V8Z"
|
||||
/>
|
||||
<path
|
||||
className="fill-zinc-900 dark:fill-white"
|
||||
d="M26.538 18h2.654v-3.999h2.576c2.672 0 4.456-1.723 4.456-4.333V9.65c0-2.61-1.784-4.333-4.456-4.333h-5.23V18Zm4.58-10.582c1.52 0 2.416.8 2.416 2.241v.018c0 1.441-.896 2.25-2.417 2.25h-1.925V7.418h1.925ZM38.051 18h2.566v-5.414c0-1.371.923-2.206 2.382-2.206.396 0 .791.061 1.178.15V8.287a3.843 3.843 0 0 0-.958-.123c-1.257 0-2.136.615-2.443 1.661h-.159V8.323h-2.566V18Zm11.55.202c2.979 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.773-5.036-2.953 0-4.772 1.916-4.772 5.036v.018c0 3.146 1.793 5.036 4.772 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.144-3.023 1.354 0 2.145 1.134 2.145 3.023v.018c0 1.907-.782 3.023-2.145 3.023Zm10.52 1.846c.492 0 .967-.053 1.283-.114v-1.907a6.057 6.057 0 0 1-.755.044c-.87 0-1.24-.387-1.24-1.257v-4.544h1.995V8.323H59.41V6.012h-2.592v2.311h-1.495v1.934h1.495v5.133c0 1.88.949 2.645 3.304 2.645Zm7.287.167c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.954 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.372 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023Zm10.767 2.013c2.522 0 4.034-1.353 4.297-3.463l.01-.053h-2.374l-.017.036c-.229.966-.853 1.467-1.908 1.467-1.37 0-2.135-1.08-2.135-3.04v-.018c0-1.934.755-3.006 2.135-3.006 1.099 0 1.74.615 1.908 1.556l.008.017h2.391v-.026c-.228-2.162-1.749-3.56-4.315-3.56-3.033 0-4.738 1.837-4.738 5.019v.017c0 3.217 1.714 5.054 4.738 5.054Zm10.257 0c2.98 0 4.772-1.88 4.772-5.036v-.018c0-3.128-1.82-5.036-4.772-5.036-2.953 0-4.773 1.916-4.773 5.036v.018c0 3.146 1.793 5.036 4.773 5.036Zm0-2.013c-1.371 0-2.145-1.116-2.145-3.023v-.018c0-1.89.782-3.023 2.145-3.023 1.353 0 2.144 1.134 2.144 3.023v.018c0 1.907-.782 3.023-2.144 3.023ZM95.025 18h2.566V4.623h-2.566V18Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -1,279 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useRef } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import clsx from 'clsx'
|
||||
import { AnimatePresence, motion, useIsPresent } from 'framer-motion'
|
||||
|
||||
import { Button } from '@/app/docs/_components/Button'
|
||||
import { useIsInsideMobileNavigation } from '@/app/docs/_components/MobileNavigation'
|
||||
import { useSectionStore } from '@/app/docs/_components/SectionProvider'
|
||||
import { Tag } from '@/app/docs/_components/Tag'
|
||||
import { remToPx } from '@/lib/remToPx'
|
||||
|
||||
interface NavGroup {
|
||||
title: string
|
||||
links: Array<{
|
||||
title: string
|
||||
href: string
|
||||
}>
|
||||
}
|
||||
|
||||
function useInitialValue<T>(value: T, condition = true) {
|
||||
let initialValue = useRef(value).current
|
||||
return condition ? initialValue : value
|
||||
}
|
||||
|
||||
function TopLevelNavItem({
|
||||
href,
|
||||
children,
|
||||
}: {
|
||||
href: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<li className="md:hidden">
|
||||
<Link
|
||||
href={href}
|
||||
className="block py-1 text-sm text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white"
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function NavLink({
|
||||
href,
|
||||
children,
|
||||
tag,
|
||||
active = false,
|
||||
isAnchorLink = false,
|
||||
}: {
|
||||
href: string
|
||||
children: React.ReactNode
|
||||
tag?: string
|
||||
active?: boolean
|
||||
isAnchorLink?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
className={clsx(
|
||||
'flex justify-between gap-2 py-1 pr-3 text-sm transition',
|
||||
isAnchorLink ? 'pl-7' : 'pl-4',
|
||||
active
|
||||
? 'text-zinc-900 dark:text-white'
|
||||
: 'text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white'
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{children}</span>
|
||||
{tag && (
|
||||
<Tag variant="small" color="zinc">
|
||||
{tag}
|
||||
</Tag>
|
||||
)}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
function VisibleSectionHighlight({
|
||||
group,
|
||||
pathname,
|
||||
}: {
|
||||
group: NavGroup
|
||||
pathname: string
|
||||
}) {
|
||||
let [sections, visibleSections] = useInitialValue(
|
||||
[
|
||||
useSectionStore((s) => s.sections),
|
||||
useSectionStore((s) => s.visibleSections),
|
||||
],
|
||||
useIsInsideMobileNavigation()
|
||||
)
|
||||
|
||||
let isPresent = useIsPresent()
|
||||
let firstVisibleSectionIndex = Math.max(
|
||||
0,
|
||||
[{ id: '_top' }, ...sections].findIndex(
|
||||
(section) => section.id === visibleSections[0]
|
||||
)
|
||||
)
|
||||
let itemHeight = remToPx(2)
|
||||
let height = isPresent
|
||||
? Math.max(1, visibleSections.length) * itemHeight
|
||||
: itemHeight
|
||||
let top =
|
||||
group.links.findIndex((link) => link.href === pathname) * itemHeight +
|
||||
firstVisibleSectionIndex * itemHeight
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 0.2 } }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="absolute inset-x-0 top-0 bg-zinc-800/2.5 will-change-transform dark:bg-white/2.5"
|
||||
style={{ borderRadius: 8, height, top }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ActivePageMarker({
|
||||
group,
|
||||
pathname,
|
||||
}: {
|
||||
group: NavGroup
|
||||
pathname: string
|
||||
}) {
|
||||
let itemHeight = remToPx(2)
|
||||
let offset = remToPx(0.25)
|
||||
let activePageIndex = group.links.findIndex((link) => link.href === pathname)
|
||||
let top = offset + activePageIndex * itemHeight
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
layout
|
||||
className="absolute left-2 h-6 w-px bg-emerald-500"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1, transition: { delay: 0.2 } }}
|
||||
exit={{ opacity: 0 }}
|
||||
style={{ top }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationGroup({
|
||||
group,
|
||||
className,
|
||||
}: {
|
||||
group: NavGroup
|
||||
className?: string
|
||||
}) {
|
||||
// If this is the mobile navigation then we always render the initial
|
||||
// state, so that the state does not change during the close animation.
|
||||
// The state will still update when we re-open (re-render) the navigation.
|
||||
let isInsideMobileNavigation = useIsInsideMobileNavigation()
|
||||
let [pathname, sections] = useInitialValue(
|
||||
[usePathname(), useSectionStore((s) => s.sections)],
|
||||
isInsideMobileNavigation
|
||||
)
|
||||
|
||||
let isActiveGroup =
|
||||
group.links.findIndex((link) => link.href === pathname) !== -1
|
||||
|
||||
return (
|
||||
<li className={clsx('relative mt-6', className)}>
|
||||
<motion.h2
|
||||
layout="position"
|
||||
className="text-xs font-semibold text-zinc-900 dark:text-white"
|
||||
>
|
||||
{group.title}
|
||||
</motion.h2>
|
||||
<div className="relative mt-3 pl-2">
|
||||
<AnimatePresence initial={!isInsideMobileNavigation}>
|
||||
{isActiveGroup && (
|
||||
<VisibleSectionHighlight group={group} pathname={pathname} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<motion.div
|
||||
layout
|
||||
className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
|
||||
/>
|
||||
<AnimatePresence initial={false}>
|
||||
{isActiveGroup && (
|
||||
<ActivePageMarker group={group} pathname={pathname} />
|
||||
)}
|
||||
</AnimatePresence>
|
||||
<ul role="list" className="border-l border-transparent">
|
||||
{group.links.map((link) => (
|
||||
<motion.li key={link.href} layout="position" className="relative">
|
||||
<NavLink href={link.href} active={link.href === pathname}>
|
||||
{link.title}
|
||||
</NavLink>
|
||||
<AnimatePresence mode="popLayout" initial={false}>
|
||||
{link.href === pathname && sections.length > 0 && (
|
||||
<motion.ul
|
||||
role="list"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
opacity: 1,
|
||||
transition: { delay: 0.1 },
|
||||
}}
|
||||
exit={{
|
||||
opacity: 0,
|
||||
transition: { duration: 0.15 },
|
||||
}}
|
||||
>
|
||||
{sections.map((section) => (
|
||||
<li key={section.id}>
|
||||
<NavLink
|
||||
href={`${link.href}#${section.id}`}
|
||||
tag={section.tag}
|
||||
isAnchorLink
|
||||
>
|
||||
{section.title}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
</motion.ul>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export const navigation: Array<NavGroup> = [
|
||||
{
|
||||
title: 'Guides',
|
||||
links: [
|
||||
{ title: 'Introduction', href: '/docs/' },
|
||||
{ title: 'Quickstart', href: '/docs/quickstart' },
|
||||
{ title: 'SDKs', href: '/docs/sdks' },
|
||||
{ title: 'Authentication', href: '/docs/authentication' },
|
||||
{ title: 'Pagination', href: '/docs/pagination' },
|
||||
{ title: 'Errors', href: '/docs/errors' },
|
||||
{ title: 'Webhooks', href: '/docs/webhooks' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Resources',
|
||||
links: [
|
||||
{ title: 'Contacts', href: '/docs/contacts' },
|
||||
{ title: 'Conversations', href: '/docs/conversations' },
|
||||
{ title: 'Messages', href: '/docs/messages' },
|
||||
{ title: 'Groups', href: '/docs/groups' },
|
||||
{ title: 'Attachments', href: '/docs/attachments' },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
|
||||
return (
|
||||
<nav {...props}>
|
||||
<ul role="list">
|
||||
<TopLevelNavItem href="/">API</TopLevelNavItem>
|
||||
<TopLevelNavItem href="#">Documentation</TopLevelNavItem>
|
||||
<TopLevelNavItem href="#">Support</TopLevelNavItem>
|
||||
{navigation.map((group, groupIndex) => (
|
||||
<NavigationGroup
|
||||
key={group.title}
|
||||
group={group}
|
||||
className={groupIndex === 0 ? 'md:mt-0' : ''}
|
||||
/>
|
||||
))}
|
||||
<li className="sticky bottom-0 z-10 mt-6 min-[416px]:hidden">
|
||||
<Button href="#" variant="filled" className="w-full">
|
||||
Sign in
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
@@ -1,186 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import {
|
||||
type MotionValue,
|
||||
motion,
|
||||
useMotionTemplate,
|
||||
useMotionValue,
|
||||
} from 'framer-motion'
|
||||
|
||||
import { GridPattern } from '@/app/docs/_components/GridPattern'
|
||||
import { Heading } from '@/app/docs/_components/Heading'
|
||||
import { ChatBubbleIcon } from '@/app/docs/_components/icons/ChatBubbleIcon'
|
||||
import { EnvelopeIcon } from '@/app/docs/_components/icons/EnvelopeIcon'
|
||||
import { UserIcon } from '@/app/docs/_components/icons/UserIcon'
|
||||
import { UsersIcon } from '@/app/docs/_components/icons/UsersIcon'
|
||||
|
||||
interface Resource {
|
||||
href: string
|
||||
name: string
|
||||
description: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
pattern: Omit<
|
||||
React.ComponentPropsWithoutRef<typeof GridPattern>,
|
||||
'width' | 'height' | 'x'
|
||||
>
|
||||
}
|
||||
|
||||
const resources: Array<Resource> = [
|
||||
{
|
||||
href: '/docs/contacts',
|
||||
name: 'Contacts',
|
||||
description:
|
||||
'Learn about the contact model and how to create, retrieve, update, delete, and list contacts.',
|
||||
icon: UserIcon,
|
||||
pattern: {
|
||||
y: 16,
|
||||
squares: [
|
||||
[0, 1],
|
||||
[1, 3],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/conversations',
|
||||
name: 'Conversations',
|
||||
description:
|
||||
'Learn about the conversation model and how to create, retrieve, update, delete, and list conversations.',
|
||||
icon: ChatBubbleIcon,
|
||||
pattern: {
|
||||
y: -6,
|
||||
squares: [
|
||||
[-1, 2],
|
||||
[1, 3],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/messages',
|
||||
name: 'Messages',
|
||||
description:
|
||||
'Learn about the message model and how to create, retrieve, update, delete, and list messages.',
|
||||
icon: EnvelopeIcon,
|
||||
pattern: {
|
||||
y: 32,
|
||||
squares: [
|
||||
[0, 2],
|
||||
[1, 4],
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
href: '/docs/groups',
|
||||
name: 'Groups',
|
||||
description:
|
||||
'Learn about the group model and how to create, retrieve, update, delete, and list groups.',
|
||||
icon: UsersIcon,
|
||||
pattern: {
|
||||
y: 22,
|
||||
squares: [[0, 1]],
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
function ResourceIcon({ icon: Icon }: { icon: Resource['icon'] }) {
|
||||
return (
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-zinc-900/5 ring-1 ring-zinc-900/25 backdrop-blur-[2px] transition duration-300 group-hover:bg-white/50 group-hover:ring-zinc-900/25 dark:bg-white/7.5 dark:ring-white/15 dark:group-hover:bg-emerald-300/10 dark:group-hover:ring-emerald-400">
|
||||
<Icon className="h-5 w-5 fill-zinc-700/10 stroke-zinc-700 transition-colors duration-300 group-hover:stroke-zinc-900 dark:fill-white/10 dark:stroke-zinc-400 dark:group-hover:fill-emerald-300/10 dark:group-hover:stroke-emerald-400" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ResourcePattern({
|
||||
mouseX,
|
||||
mouseY,
|
||||
...gridProps
|
||||
}: Resource['pattern'] & {
|
||||
mouseX: MotionValue<number>
|
||||
mouseY: MotionValue<number>
|
||||
}) {
|
||||
let maskImage = useMotionTemplate`radial-gradient(180px at ${mouseX}px ${mouseY}px, white, transparent)`
|
||||
let style = { maskImage, WebkitMaskImage: maskImage }
|
||||
|
||||
return (
|
||||
<div className="pointer-events-none">
|
||||
<div className="absolute inset-0 rounded-2xl transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
|
||||
<GridPattern
|
||||
width={72}
|
||||
height={56}
|
||||
x="50%"
|
||||
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/[0.02] stroke-black/5 dark:fill-white/1 dark:stroke-white/2.5"
|
||||
{...gridProps}
|
||||
/>
|
||||
</div>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl bg-gradient-to-r from-[#D7EDEA] to-[#F4FBDF] opacity-0 transition duration-300 group-hover:opacity-100 dark:from-[#202D2E] dark:to-[#303428]"
|
||||
style={style}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute inset-0 rounded-2xl opacity-0 mix-blend-overlay transition duration-300 group-hover:opacity-100"
|
||||
style={style}
|
||||
>
|
||||
<GridPattern
|
||||
width={72}
|
||||
height={56}
|
||||
x="50%"
|
||||
className="absolute inset-x-0 inset-y-[-30%] h-[160%] w-full skew-y-[-18deg] fill-black/50 stroke-black/70 dark:fill-white/2.5 dark:stroke-white/10"
|
||||
{...gridProps}
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Resource({ resource }: { resource: Resource }) {
|
||||
let mouseX = useMotionValue(0)
|
||||
let mouseY = useMotionValue(0)
|
||||
|
||||
function onMouseMove({
|
||||
currentTarget,
|
||||
clientX,
|
||||
clientY,
|
||||
}: React.MouseEvent<HTMLDivElement>) {
|
||||
let { left, top } = currentTarget.getBoundingClientRect()
|
||||
mouseX.set(clientX - left)
|
||||
mouseY.set(clientY - top)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={resource.href}
|
||||
onMouseMove={onMouseMove}
|
||||
className="group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
|
||||
>
|
||||
<ResourcePattern {...resource.pattern} mouseX={mouseX} mouseY={mouseY} />
|
||||
<div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
|
||||
<div className="relative rounded-2xl px-4 pb-4 pt-16">
|
||||
<ResourceIcon icon={resource.icon} />
|
||||
<h3 className="mt-4 text-sm font-semibold leading-7 text-zinc-900 dark:text-white">
|
||||
<Link href={resource.href}>
|
||||
<span className="absolute inset-0 rounded-2xl" />
|
||||
{resource.name}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function Resources() {
|
||||
return (
|
||||
<div className="my-16 xl:max-w-none">
|
||||
<Heading level={2} id="resources">
|
||||
Resources
|
||||
</Heading>
|
||||
<div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
|
||||
{resources.map((resource) => (
|
||||
<Resource key={resource.href} resource={resource} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
25
apps/formbricks-com/app/docs/actions/code/page.mdx
Normal file
25
apps/formbricks-com/app/docs/actions/code/page.mdx
Normal file
@@ -0,0 +1,25 @@
|
||||
export const meta = {
|
||||
title: "Code Actions",
|
||||
description:
|
||||
"Integrate code actions in Formbricks using formbricks.track() to trigger surveys based on user actions, like button clicks, for precise insights. All open-source.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
|
||||
# Code Actions
|
||||
|
||||
Actions can also be set in the code base. You can fire an action using `formbricks.track()`
|
||||
|
||||
```javascript
|
||||
formbricks.track("Action Name");
|
||||
```
|
||||
|
||||
Here is an example of how to fire an action when a user clicks a button:
|
||||
|
||||
```javascript
|
||||
const handleClick = () => {
|
||||
formbricks.track("Button Clicked");
|
||||
};
|
||||
|
||||
return <button onClick={handleClick}>Click Me</button>;
|
||||
```
|
||||
30
apps/formbricks-com/app/docs/actions/no-code/page.mdx
Normal file
30
apps/formbricks-com/app/docs/actions/no-code/page.mdx
Normal file
@@ -0,0 +1,30 @@
|
||||
export const meta = {
|
||||
title: "No-Code Actions",
|
||||
description:
|
||||
"Utilize Formbricks' No-Code Actions like Page URL, innerText, and CSS Selector for easy survey triggers and enhanced user insights.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
|
||||
# No-Code Actions
|
||||
|
||||
No-Code actions can be set up within Formbricks with just a few clicks. There are three types of No-Code actions:
|
||||
|
||||
## Page URL Action
|
||||
|
||||
The page URL action is triggered, when a user visits a specific page in your application. There are several match conditions:
|
||||
|
||||
- `exactMatch`: The URL should exactly match the provided string.
|
||||
- `contains`: The URL should contain the specified string as a substring.
|
||||
- `startsWith`: The URL should start with the specified string.
|
||||
- `endsWith`: The URL should end with the specified string.
|
||||
- `notMatch`: The URL should not match the specified condition.
|
||||
- `notContains`: The URL should not contain the specified string as a substring.
|
||||
|
||||
## innerText Action
|
||||
|
||||
The innerText action 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 Action
|
||||
|
||||
The CSS Selector action 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!
|
||||
23
apps/formbricks-com/app/docs/actions/why/page.mdx
Normal file
23
apps/formbricks-com/app/docs/actions/why/page.mdx
Normal file
@@ -0,0 +1,23 @@
|
||||
export const meta = {
|
||||
title: "What are actions and why are they useful?",
|
||||
description:
|
||||
"Actions in Formbricks enable targeted survey displays during specific user journey moments. Enhance user segmentation by tracking actions for granular surveying.",
|
||||
};
|
||||
|
||||
[Actions]()
|
||||
|
||||
# What are actions and why are they useful?
|
||||
|
||||
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 actions.
|
||||
|
||||
## What are actions?
|
||||
|
||||
Actions are a little notification sent from your application to Formbricks. You decide which actions are sent either in your [Code](/docs/actions/code) or by setting up a [No-Code](/docs/actions/no-code) action within Formbricks.
|
||||
|
||||
## How do actions work?
|
||||
|
||||
When a predefined action happens in your app, the Formbricks widget notices. This action can then trigger a survey to be shown to the user and is stored in the database.
|
||||
|
||||
## Why are actions useful?
|
||||
|
||||
Actions help you to display your surveys at the right time. Later on, you will be able to segment your users based on the actions they have triggered in the past. This way, you can create much more granular user segments, e.g. only target users that already have used a specific feature.
|
||||
BIN
apps/formbricks-com/app/docs/api/api-key-setup/add-api-key.png
Normal file
BIN
apps/formbricks-com/app/docs/api/api-key-setup/add-api-key.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
40
apps/formbricks-com/app/docs/api/api-key-setup/page.mdx
Normal file
40
apps/formbricks-com/app/docs/api/api-key-setup/page.mdx
Normal file
@@ -0,0 +1,40 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import AddApiKey from "./add-api-key.png";
|
||||
import ApiKeySecret from "./api-key-secret.png";
|
||||
|
||||
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.",
|
||||
};
|
||||
|
||||
[API]()
|
||||
|
||||
# API Key Setup
|
||||
|
||||
## Auth: Personal API key
|
||||
|
||||
The API requests are authorized with a personal API key. This API key gives you the same rights as if you were logged in at formbricks.com - **don't share it around!**
|
||||
|
||||
### How to generate an API key
|
||||
|
||||
1. Go to your settings on [app.formbricks.com](https://app.formbricks.com).
|
||||
2. Go to page “API keys”
|
||||
<Image src={AddApiKey} alt="Add API Key" quality="100" className="rounded-lg" />
|
||||
3. Create a key for the development or production environment.
|
||||
4. Copy the key immediately. You won’t be able to see it again.
|
||||
<Image src={ApiKeySecret} alt="API Key Secret" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Store API key safely {{ class: "text-white" }}
|
||||
Anyone who has your API key has full control over your account. For security reasons, you cannot view the API
|
||||
key again.
|
||||
</Note>
|
||||
|
||||
### Delete a personal API key
|
||||
|
||||
1. Go to settings on [app.formbricks.com](https://app.formbricks.com/).
|
||||
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.
|
||||
104
apps/formbricks-com/app/docs/api/get-responses/page.mdx
Normal file
104
apps/formbricks-com/app/docs/api/get-responses/page.mdx
Normal file
@@ -0,0 +1,104 @@
|
||||
export const meta = {
|
||||
title: "API: Get Responses",
|
||||
description: "Fetch all the responses for your environment.",
|
||||
};
|
||||
|
||||
[API]()
|
||||
|
||||
# API: Get Responses
|
||||
|
||||
## List all Responses {{ tag: 'GET', label: '/api/v1/responses' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
Retrieve all the responses you have received for all your surveys.
|
||||
|
||||
### Mandatory Headers
|
||||
|
||||
<Properties>
|
||||
<Property name="x-Api-Key" type="string">
|
||||
Your Formbricks API key.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
### Optional Query Params
|
||||
<Properties>
|
||||
<Property name="surveyId" type="string">
|
||||
SurveyId to filter responses by.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/api/v1/responses">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl --location \
|
||||
'https://app.formbricks.com/api/v1/responses' \
|
||||
--header \
|
||||
'x-api-key: <your-api-key>'
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
<CodeGroup title="Response">
|
||||
|
||||
```json {{title:'200 Success'}}
|
||||
{
|
||||
"data":[
|
||||
{
|
||||
"id":"cllnfybxd051rpl0gieavthr9",
|
||||
"createdAt":"2023-08-23T07:56:33.121Z",
|
||||
"updatedAt":"2023-08-23T07:56:41.793Z",
|
||||
"surveyId":"cllnfy2780fromy0hy7uoxvtn",
|
||||
"finished":true,
|
||||
"data":{
|
||||
"ec7agikkr58j8uonhioinkyk":"Loved it!",
|
||||
"gml6mgy71efgtq8np3s9je5p":"clicked",
|
||||
"klvpwd4x08x8quesihvw5l92":"Product Manager",
|
||||
"kp62fbqe8cfzmvy8qwpr81b2":"Very disappointed",
|
||||
"lkjaxb73ulydzeumhd51sx9g":"Not interesed.",
|
||||
"ryo75306flyg72iaeditbv51":"Would love if it had dark theme."
|
||||
},
|
||||
"meta":{
|
||||
"url":"https://app.formbricks.com/s/cllnfy2780fromy0hy7uoxvtn",
|
||||
"userAgent":{
|
||||
"os":"Linux",
|
||||
"browser":"Chrome"
|
||||
}
|
||||
},
|
||||
"personAttributes":null,
|
||||
"person":null,
|
||||
"notes":[],
|
||||
"tags":[]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```json {{ title: '404 Not Found' }}
|
||||
{
|
||||
"code": "not_found",
|
||||
"message": "cllnfy2780fromy0hy7uoxvt not found",
|
||||
"details": {
|
||||
"resource_id": "survey",
|
||||
"resource_type": "cllnfy2780fromy0hy7uoxvt"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json {{ title: '401 Not Authenticated' }}
|
||||
{
|
||||
"code": "not_authenticated",
|
||||
"message": "Not authenticated",
|
||||
"details": {
|
||||
"x-Api-Key": "Header not provided or API Key invalid"
|
||||
}
|
||||
}
|
||||
```
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
27
apps/formbricks-com/app/docs/api/overview/page.mdx
Normal file
27
apps/formbricks-com/app/docs/api/overview/page.mdx
Normal file
@@ -0,0 +1,27 @@
|
||||
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.",
|
||||
};
|
||||
|
||||
[API]()
|
||||
|
||||
# API Overview
|
||||
|
||||
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.
|
||||
|
||||
## Public Client API
|
||||
|
||||
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
|
||||
|
||||
## User API
|
||||
|
||||
The User API provides access to all data and settings that are visible in the Formbricks App. This API requires a personal API Key for authentication, which can be generated in the Settings section of the Formbricks App. With the User API, you can manage your Formbricks account programmatically, accessing and modifying data and settings as needed.
|
||||
|
||||
**Auth:** Personal API Key
|
||||
|
||||
API requests made to the User API are authorized using a personal API key. This key grants the same rights and access as if you were logged in at formbricks.com. It's essential to keep your API key secure and not share it with others.
|
||||
|
||||
To generate, store, or delete an API key, follow the instructions provided on the following page [API Key](/docs/api/api-key-setup).
|
||||
|
||||
By understanding the differences between these two APIs, you can choose the appropriate one for your needs, ensuring a secure and efficient integration with the Formbricks platform.
|
||||
@@ -1,363 +0,0 @@
|
||||
export const metadata = {
|
||||
title: 'Attachments',
|
||||
description:
|
||||
'On this page, we’ll dive into the different attachment endpoints you can use to manage attachments programmatically.',
|
||||
}
|
||||
|
||||
# Attachments
|
||||
|
||||
Attachments are how you share things in Protocol — they allow you to send all sorts of files to your contacts and groups. On this page, we'll dive into the different attachment endpoints you can use to manage attachments programmatically. We'll look at how to query, upload, update, and delete attachments. {{ className: 'lead' }}
|
||||
|
||||
## The attachment model
|
||||
|
||||
The attachment model contains all the information about the files you send to your contacts and groups, including the name, type, and size.
|
||||
|
||||
### Properties
|
||||
|
||||
<Properties>
|
||||
<Property name="id" type="string">
|
||||
Unique identifier for the attachment.
|
||||
</Property>
|
||||
<Property name="message_id" type="string">
|
||||
Unique identifier for the message associated with the attachment.
|
||||
</Property>
|
||||
<Property name="filename" type="string">
|
||||
The filename for the attachment.
|
||||
</Property>
|
||||
<Property name="file_url" type="string">
|
||||
The URL for the attached file.
|
||||
</Property>
|
||||
<Property name="file_type" type="string">
|
||||
The MIME type of the attached file.
|
||||
</Property>
|
||||
<Property name="file_size" type="integer">
|
||||
The file size of the attachment in bytes.
|
||||
</Property>
|
||||
<Property name="created_at" type="timestamp">
|
||||
Timestamp of when the attachment was created.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
---
|
||||
|
||||
## List all attachments {{ tag: 'GET', label: '/v1/attachments' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve a paginated list of all your attachments (in a conversation if a conversation id is provided). By default, a maximum of ten attachments are shown per page.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="conversation_id" type="string">
|
||||
Limit to attachments from a given conversation.
|
||||
</Property>
|
||||
<Property name="limit" type="integer">
|
||||
Limit the number of attachments returned.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/attachments">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -G https://api.protocol.chat/v1/attachments \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d conversation_id="xgQQXg3hrtjh7AvZ" \
|
||||
-d limit=10
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.attachments.list()
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.attachments.list()
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->attachments->list();
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"has_more": false,
|
||||
"data": [
|
||||
{
|
||||
"id": "Nc6yKKMpcxiiFxp6",
|
||||
"message_id": "LoPsJaMcPBuFNjg1",
|
||||
"filename": "Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_url": "https://assets.protocol.chat/attachments/Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_type": "application/pdf",
|
||||
"file_size": 21352,
|
||||
"created_at": 692233200
|
||||
},
|
||||
{
|
||||
"id": "hSIhXBhNe8X1d8Et"
|
||||
// ...
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Create an attachment {{ tag: 'POST', label: '/v1/attachments' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to upload a new attachment to a conversation. See the code examples for how to send the file to the Protocol API.
|
||||
|
||||
### Required attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="file" type="string">
|
||||
The file you want to add as an attachment.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="POST" label="/v1/attachments">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/attachments \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-F file="../Invoice_room_service__Plaza_Hotel.pdf"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.attachments.create({ file })
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.attachments.create(file=file)
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->attachments->create([
|
||||
'file' => $file,
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "Nc6yKKMpcxiiFxp6",
|
||||
"message_id": "LoPsJaMcPBuFNjg1",
|
||||
"filename": "Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_url": "https://assets.protocol.chat/attachments/Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_type": "application/pdf",
|
||||
"file_size": 21352,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Retrieve an attachment {{ tag: 'GET', label: '/v1/attachments/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve an attachment by providing the attachment id. Refer to [the list](#the-attachment-model) at the top of this page to see which properties are included with attachment objects.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/attachments/Nc6yKKMpcxiiFxp6">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/attachments/Nc6yKKMpcxiiFxp6 \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.attachments.get('Nc6yKKMpcxiiFxp6')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.attachments.get("Nc6yKKMpcxiiFxp6")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->attachments->get('Nc6yKKMpcxiiFxp6');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "Nc6yKKMpcxiiFxp6",
|
||||
"message_id": "LoPsJaMcPBuFNjg1",
|
||||
"filename": "Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_url": "https://assets.protocol.chat/attachments/Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_type": "application/pdf",
|
||||
"file_size": 21352,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Update an attachment {{ tag: 'PUT', label: '/v1/attachments/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to perform an update on an attachment. Currently, the only supported type of update is changing the filename.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="filename" type="string">
|
||||
The new filename for the attachment.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="PUT" label="/v1/attachments/Nc6yKKMpcxiiFxp6">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X PUT https://api.protocol.chat/v1/attachments/Nc6yKKMpcxiiFxp6 \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d filename="Invoice_room_service__Plaza_Hotel_updated.pdf"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.attachments.update('Nc6yKKMpcxiiFxp6', {
|
||||
filename: 'Invoice_room_service__Plaza_Hotel_updated.pdf',
|
||||
})
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.attachments.update("Nc6yKKMpcxiiFxp6", filename="Invoice_room_service__Plaza_Hotel_updated.pdf")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->attachments->update('Nc6yKKMpcxiiFxp6', [
|
||||
'filename' => 'Invoice_room_service__Plaza_Hotel_updated.pdf',
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "Nc6yKKMpcxiiFxp6",
|
||||
"message_id": "LoPsJaMcPBuFNjg1",
|
||||
"filename": "Invoice_room_service__Plaza_Hotel.pdf",
|
||||
"file_url": "https://assets.protocol.chat/attachments/Invoice_room_service__Plaza_Hotel_updated.pdf",
|
||||
"file_type": "application/pdf",
|
||||
"file_size": 21352,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Delete an attachment {{ tag: 'DELETE', label: '/v1/attachments/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to delete attachments. Note: This will permanently delete the file.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="DELETE" label="/v1/attachments/Nc6yKKMpcxiiFxp6">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X DELETE https://api.protocol.chat/v1/attachments/Nc6yKKMpcxiiFxp6 \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.attachments.delete('Nc6yKKMpcxiiFxp6')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.attachments.delete("Nc6yKKMpcxiiFxp6")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->attachments->delete('Nc6yKKMpcxiiFxp6');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -0,0 +1,27 @@
|
||||
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.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
|
||||
# Setting attributes with code
|
||||
|
||||
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:
|
||||
|
||||
### Setting Custom User Attributes
|
||||
|
||||
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("Plan", "Pro");
|
||||
```
|
||||
|
||||
Generally speaking, the setAttribute function works like this:
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("attribute_key", "attribute_value");
|
||||
```
|
||||
|
||||
Where `attributeName` is the name of the attribute you want to set, and `attributeValue` is the value of the attribute you want to set.
|
||||
@@ -0,0 +1,45 @@
|
||||
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.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
|
||||
# Identifying Users
|
||||
|
||||
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.
|
||||
|
||||
Once the Formbricks widget is loaded on your web app, our SDK exposes methods for identifying user attributes. Let's set it up!
|
||||
|
||||
## Setting User ID
|
||||
|
||||
You can use the `setUserId` function to identify a user with any string. It's best to use the default identifier you use in your app (e.g. unique id from database) but you can also anonymize these as long as they are unique for every user. This function can be called multiple times with the same value safely and stores the identifier in local storage. We recommend you set the User ID whenever the user logs in to your website, as well as after the installation snippet (if the user is already logged in).
|
||||
|
||||
```javascript
|
||||
formbricks.setUserId("USER_ID");
|
||||
```
|
||||
|
||||
## Setting User Email
|
||||
|
||||
You can use the setEmail function to set the user's email:
|
||||
|
||||
```javascript
|
||||
formbricks.setEmail("user@example.com");
|
||||
```
|
||||
|
||||
### Setting Custom User Attributes
|
||||
|
||||
You can use the setAttribute function to set any custom attribute for the user (e.g. name, plan, etc.):
|
||||
|
||||
```javascript
|
||||
formbricks.setAttribute("attribute_key", "attribute_value");
|
||||
```
|
||||
|
||||
### Logging Out Users
|
||||
|
||||
When a user logs out of your webpage, make sure to log them out of Formbricks as well. This will prevent new activity from being associated with an incorrect user. Use the logout function:
|
||||
|
||||
```javascript
|
||||
formbricks.logout();
|
||||
```
|
||||
23
apps/formbricks-com/app/docs/attributes/why/page.mdx
Normal file
23
apps/formbricks-com/app/docs/attributes/why/page.mdx
Normal file
@@ -0,0 +1,23 @@
|
||||
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.",
|
||||
};
|
||||
|
||||
[Attributes]()
|
||||
|
||||
# What are attributes and why are they useful?
|
||||
|
||||
Surveying your user base without segmentation leads to weak results and survey fatigue. Attributes help you segment your users into groups.
|
||||
|
||||
## What are attributes?
|
||||
|
||||
Attributes are key-value pairs that you can set for each person individually. For example, the attribute "Plan" can be set to "Free" or "Paid".
|
||||
|
||||
## How do attributes work?
|
||||
|
||||
Attributes are sent from your application to Formbricks and are associated with the current user. We store it in our database and allow you to use it the next time you create a survey.
|
||||
|
||||
## Why are attributes useful?
|
||||
|
||||
Attributes help show surveys to the right group of people. For example, you can show a survey to all users who have a "Plan" attribute set to "Paid".
|
||||
@@ -1,44 +0,0 @@
|
||||
export const metadata = {
|
||||
title: 'Authentication',
|
||||
description:
|
||||
'In this guide, we’ll look at how authentication works. Protocol offers two ways to authenticate your API requests: Basic authentication and OAuth2 with a token.',
|
||||
}
|
||||
|
||||
# Authentication
|
||||
|
||||
You'll need to authenticate your requests to access any of the endpoints in the Protocol API. In this guide, we'll look at how authentication works. Protocol offers two ways to authenticate your API requests: Basic authentication and OAuth2 with a token — OAuth2 is the recommended way. {{ className: 'lead' }}
|
||||
|
||||
## Basic authentication
|
||||
|
||||
With basic authentication, you use your username and password to authenticate your HTTP requests. Unless you have a very good reason, you probably shouldn't use basic auth. Here's how to authenticate using cURL:
|
||||
|
||||
```bash {{ title: 'Example request with basic auth' }}
|
||||
curl https://api.protocol.chat/v1/conversations \
|
||||
-u username:password
|
||||
```
|
||||
|
||||
Please don't commit your Protocol password to GitHub!
|
||||
|
||||
## OAuth2 with bearer token
|
||||
|
||||
The recommended way to authenticate with the Protocol API is by using OAuth2. When establishing a connection using OAuth2, you will need your access token — you will find it in the [Protocol dashboard](#) under API settings. Here's how to add the token to the request header using cURL:
|
||||
|
||||
```bash {{ title: 'Example request with bearer token' }}
|
||||
curl https://api.protocol.chat/v1/conversations \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
Always keep your token safe and reset it if you suspect it has been compromised.
|
||||
|
||||
## Using an SDK
|
||||
|
||||
If you use one of our official SDKs, you won't have to worry about any of the above — fetch your access token from the [Protocol dashboard](#) under API settings, and the client library will take care of the rest. All the client libraries use OAuth2 behind the scenes.
|
||||
|
||||
<div className="not-prose">
|
||||
<Button
|
||||
href="/sdks"
|
||||
variant="text"
|
||||
arrow="right"
|
||||
children="Check out our list of first-party SDKs"
|
||||
/>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
@@ -0,0 +1,126 @@
|
||||
import Image from "next/image";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
|
||||
import CreateChurnFlow from "./create-cancel-flow.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import TriggerInnerText from "./trigger-inner-text.png";
|
||||
import TriggerCSS from "./trigger-css-selector.png";
|
||||
import TriggerPageUrl from "./trigger-page-url.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import PublishSurvey from "./publish-survey.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Learn from Churn",
|
||||
description: "To know how to decrease churn, you have to understand it. Use a micro-survey.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Learn from Churn
|
||||
|
||||
Churn is hard, but can teach you a lot. Whenever a user decides that your product isn’t worth it anymore, you have a unique opportunity to get deep insights. These insights are pure gold to reduce churn.
|
||||
|
||||
## Purpose
|
||||
|
||||
The Churn Survey is among the most effective ways to identify weaknesses in you offering. People were willing to pay but now are not anymore: What changed? Let’s find out!
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Churn Survey" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Ask at exactly the right point in time
|
||||
- Follow-up to prevent bad reviews
|
||||
- Coming soon: Make survey mandatory
|
||||
|
||||
## Overview
|
||||
|
||||
To run the Churn Survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Churn Survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
2. Set up the user action to display survey at right point in time
|
||||
3. Choose correct recontact options to never miss a feedback
|
||||
4. Prevent that churn!
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Churn Survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Churn Survey”:
|
||||
|
||||
<Image src={CreateChurnFlow} alt="Create churn survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings._
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience
|
||||
|
||||
In this case, you don’t really need to pre-segment your audience. You likely want to ask everyone who hits the “Cancel subscription” button.
|
||||
|
||||
### 4. Set up a trigger
|
||||
|
||||
To create the trigger for your Churn Survey, you have two 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:
|
||||
|
||||
<Image src={TriggerInnerText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
|
||||
|
||||
2. **Trigger by CSS Selector:** In case you have more than one button saying “Cancel Subscription” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“cancel-subscription”` and set your user action up like so:
|
||||
|
||||
<Image src={TriggerCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
|
||||
|
||||
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:
|
||||
|
||||
<Image src={TriggerPageUrl} alt="Set the trigger by page URL" quality="100" className="rounded-lg" />
|
||||
|
||||
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](/docs/actions/why) covering [Code](/docs/actions/code) and [No-Code](/docs/actions/no-code) Actions.
|
||||
|
||||
<Note>
|
||||
## Pre-churn flow coming soon {{ class: "text-white" }}
|
||||
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>
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you milk these super valuable insights. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
These settings make sure the survey is always displayed, when a user wants to Cancel their subscription.
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights! 🎉
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,386 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import DocsFeedback from "@/components/docs/DocsFeedback";
|
||||
import AddAction from "./add-action.png";
|
||||
import ChangeId from "./change-id.png";
|
||||
import DocsNavi from "./docs-navi.png";
|
||||
import DocsTemplate from "./docs-template.png";
|
||||
import SelectNonevent from "./select-nonevent.png";
|
||||
import SwitchToDev from "./switch-to-dev.png";
|
||||
import WhenToAsk from "./when-to-ask.png";
|
||||
import CopyIds from "./copy-ids.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Docs Feedback",
|
||||
description: "Docs Feedback allows you to measure how clear your documentation is.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Docs Feedback
|
||||
|
||||
Docs Feedback allows you to measure how clear your documentation is.
|
||||
|
||||
## Purpose
|
||||
|
||||
Unlike yourself, your users don't spend 5-7 days per week thinking about your product. To fight the "Curse of Knowledge" you have to measure how clear your docs are.
|
||||
|
||||
## Preview
|
||||
|
||||
<DocsFeedback />
|
||||
|
||||
## Installation
|
||||
|
||||
To get this running, you'll need a bit of time. Here are the steps we're going through:
|
||||
|
||||
1. Set up Formbricks Cloud
|
||||
2. Build the frontend
|
||||
3. Connect to API
|
||||
4. Test
|
||||
|
||||
### 1. Setting up Formbricks Cloud
|
||||
|
||||
1. To get started, create an account for the [Formbricks Cloud](https://app.formbricks.com/auth/signup).
|
||||
|
||||
2. In the Menu (top right) you see that you can switch between a “Development” and a “Production” environment. These are two separate environments so your test data doesn’t mess up the insights from prod. Switch to “Development”:
|
||||
|
||||
<Image src={SwitchToDev} alt="switch to dev environment" quality="100" className="rounded-lg" />
|
||||
|
||||
3. Then, create a survey using the template “Docs Feedback”:
|
||||
|
||||
<Image src={DocsTemplate} alt="select docs template" quality="100" className="rounded-lg" />
|
||||
|
||||
4. Change the Internal Question ID of the first question to **“isHelpful”** to make your life easier 😉
|
||||
|
||||
<Image src={ChangeId} alt="switch to dev environment" quality="100" className="rounded-lg" />
|
||||
|
||||
5. In the same way, you can change the Internal Question ID of the _Please elaborate_ question to **“additionalFeedback”** and the one of the _Page URL_ question to **“pageUrl”**.
|
||||
|
||||
<Note>
|
||||
## Answers need to be identical {{ class: "text-white" }}
|
||||
If you want different answers than “Yes 👍” and “No 👎” you need update the 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:
|
||||
|
||||
<Image src={WhenToAsk} alt="set up when to ask card" quality="100" className="rounded-lg" />
|
||||
|
||||
7. Our goal is to create an event that never fires. This is a bit nonsensical because it is a workaround. Stick with me 😃 Fill the action out like on the screenshot:
|
||||
|
||||
<Image src={AddAction} alt="add action" quality="100" className="rounded-lg" className="rounded" />
|
||||
|
||||
8. Select the Non-Event in the dropdown. Now you see that the “Publish survey” button is active. Publish your survey 🤝
|
||||
|
||||
<Image src={SelectNonevent} alt="select nonevent" quality="100" className="rounded-lg" />
|
||||
|
||||
**You’re all setup in Formbricks Cloud for now 👍**
|
||||
|
||||
### 2. Build the frontend
|
||||
|
||||
<Note>
|
||||
## Your frontend might work differently {{ class: "text-white" }}
|
||||
Your frontend likely looks and works differently. This is an example specific to our tech stack. We want to illustrate
|
||||
what you should consider building yours 😊
|
||||
</Note>
|
||||
|
||||
Before we start, lets talk about the widget. It works like this:
|
||||
|
||||
- Once the user selects yes/no, a partial response is sent to the Formbricks API. It includes the feedback and the current page url.
|
||||
- Then the user is presented with an additional open text field to further explain their choice. Once it's submitted, the previous response is updated with the additional feedback.
|
||||
|
||||
This allows us to capture and analyze partial feedback where the user is not willing to provide additional information.
|
||||
|
||||
**Let's do this 👇**
|
||||
|
||||
1. Open the code editor where you handle your docs page.
|
||||
|
||||
2. Likely, you have a template file or similar which renders the navigation at the bottom of the page:
|
||||
|
||||
<Image src={DocsNavi} alt="doc navigation" quality="100" className="rounded-lg" className="rounded" />
|
||||
|
||||
Locate that file. We are using the [Tailwind Template “Syntax”](https://tailwindui.com/templates/syntax) for our docs. Here is our [Layout.tsx](https://github.com/formbricks/formbricks/blob/main/apps/formbricks-com/components/docs/Layout.tsx) file.
|
||||
|
||||
3. Write the frontend code for the widget. Here is the full component (we break it down right below):
|
||||
|
||||
```tsx
|
||||
import { useState } from "react";
|
||||
import { handleFeedbackSubmit, updateFeedback } from "../../lib/handleFeedbackSubmit";
|
||||
import { Popover, PopoverTrigger, PopoverContent, Button } from "@formbricks/ui";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export default function DocsFeedback() {
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [sharedFeedback, setSharedFeedback] = useState(false);
|
||||
const [responseId, setResponseId] = useState(null);
|
||||
const [freeText, setFreeText] = useState("");
|
||||
|
||||
if (
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-6 inline-flex cursor-default items-center rounded-md border border-slate-200 bg-white p-4 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||||
{!sharedFeedback ? (
|
||||
<div>
|
||||
Was this page helpful?
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="ml-4 inline-flex space-x-3">
|
||||
{["Yes 👍", " No 👎"].map((option) => (
|
||||
<PopoverTrigger
|
||||
className="rounded border border-slate-200 bg-slate-50 px-4 py-2 text-slate-900 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-300"
|
||||
onClick={async () => {
|
||||
const id = await handleFeedbackSubmit(option, router.asPath);
|
||||
setResponseId(id);
|
||||
}}>
|
||||
{option}
|
||||
</PopoverTrigger>
|
||||
))}
|
||||
</div>
|
||||
<PopoverContent className="border-slate-300 bg-white dark:border-slate-500 dark:bg-slate-700">
|
||||
<form>
|
||||
<textarea
|
||||
value={freeText}
|
||||
onChange={(e) => setFreeText(e.target.value)}
|
||||
placeholder="Please explain why..."
|
||||
className="focus:border-brand-dark focus:ring-brand-dark mb-2 w-full rounded-md bg-white text-sm text-slate-900 dark:bg-slate-600 dark:text-slate-200 dark:placeholder:text-slate-200"
|
||||
/>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
updateFeedback(freeText, responseId);
|
||||
setIsOpen(false);
|
||||
setFreeText("");
|
||||
setSharedFeedback(true);
|
||||
}}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
) : (
|
||||
<div>Thanks a lot, boss! 🤝</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Let’s break it down!**
|
||||
|
||||
Setting the local states and getting the current URL:
|
||||
|
||||
```tsx
|
||||
const router = useRouter(); // to get the URL of the current docs page
|
||||
const [isOpen, setIsOpen] = useState(false); // to close Popover after
|
||||
const [sharedFeedback, setSharedFeedback] = useState(false); // to display Thank You message
|
||||
const [responseId, setResponseId] = useState(null); // to store responseID (will explain more)
|
||||
const [freeText, setFreeText] = useState(""); // to locally store the additional info provided by user
|
||||
```
|
||||
|
||||
Disabling feedback if config environment variables are not set properly:
|
||||
|
||||
```tsx
|
||||
// Disables feedback if key info like survey ID, API Host, or Formbricks environment ID are missing
|
||||
|
||||
if (
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST ||
|
||||
!process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
```
|
||||
|
||||
The actual frontend (read comments):
|
||||
|
||||
```tsx
|
||||
return (
|
||||
<div className="mt-6 inline-flex cursor-default items-center rounded-md border border-slate-200 bg-white p-4 text-slate-800 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300">
|
||||
{!sharedFeedback ? ( // displays Feedback buttons or Thank You message
|
||||
<div>
|
||||
Was this page helpful?
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<div className="ml-4 inline-flex space-x-3">
|
||||
{["Yes 👍", " No 👎"].map((option) => ( // Popup Trigger is a button as well. This is a workaround to open the same form but send a different response to the API
|
||||
<PopoverTrigger
|
||||
className="rounded border border-slate-200 bg-slate-50 px-4 py-2 text-slate-900 hover:bg-slate-100 hover:text-slate-600 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 dark:hover:text-slate-300"
|
||||
onClick={async () => {
|
||||
const id = await handleFeedbackSubmit(option, router.asPath); // handleFeedbackSubmit sends the Yes / No choice as well as the current URL to Formbricks and returns the responseId
|
||||
setResponseId(id); // add responseId to local state so we can use it if user decides to add more feedback in free text field
|
||||
}}>
|
||||
{option} // "Yes 👍" or "No 👎" - they have to be identical with the choices in the survey on app.formbricks.com for it to work (!)
|
||||
</PopoverTrigger>
|
||||
))}
|
||||
</div>
|
||||
<PopoverContent className="border-slate-300 bg-white dark:border-slate-500 dark:bg-slate-700">
|
||||
<form> // Form to handle additional feedback by user
|
||||
<textarea
|
||||
value={freeText}
|
||||
onChange={(e) => setFreeText(e.target.value)}
|
||||
placeholder="Please explain why..."
|
||||
className="focus:border-brand-dark focus:ring-brand-dark mb-2 w-full rounded-md bg-white text-sm text-slate-900 dark:bg-slate-600 dark:text-slate-200 dark:placeholder:text-slate-200"
|
||||
/>
|
||||
<div className="text-right">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
onClick={(e) => {
|
||||
e.preventDefault(); // prevent page from reloading (default HTML behaviour)
|
||||
updateFeedback(freeText, responseId); // update initial Yes / No response with free text feedback
|
||||
setIsOpen(false); // close Popover
|
||||
setFreeText(""); // remove feedback from free text field local state
|
||||
setSharedFeedback(true); // display Thank You message
|
||||
}}>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
) : (
|
||||
<div>Thanks a lot, boss! 🤝</div> // Thank You message
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Connecting to the Formbricks API
|
||||
|
||||
The last step is to hook up your sparkling new frontend to the Formbricks API. To do so, we followed the “[Create Response](/docs/client-api/create-response)” and “[Update Response](/docs/client-api/update-response)” pages in our docs.
|
||||
|
||||
Here is the code for the `handleFeedbackSubmit` function with comments:
|
||||
|
||||
```tsx
|
||||
export const handleFeedbackSubmit = async (YesNo, pageUrl) => {
|
||||
const response_data = {
|
||||
data: {
|
||||
isHelpful: YesNo, // the "Yes 👍" or "No 👎" response. Remember: They have to be identical with the choices in the survey on app.formbricks.com for it to work.
|
||||
pageUrl: pageUrl, // So you know which page the user gives feedback about.
|
||||
},
|
||||
};
|
||||
|
||||
const payload = {
|
||||
response: response_data,
|
||||
surveyId: process.env.NEXT_PUBLIC_FORMBRICKS_COM_DOCS_FEEDBACK_SURVEY_ID, // For testing, replace this with the survey ID of your survey (more info below)
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID}/responses`, // For testing, replace this with the API host and environemnt ID of your Development environment on app.formbricks.com
|
||||
};
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
if (res.ok) {
|
||||
const responseJson = await res.json();
|
||||
return responseJson.id; // Returns the response ID
|
||||
} else {
|
||||
console.error("Error submitting form");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
And this is the `updateFeedback` function with comments:
|
||||
|
||||
```tsx
|
||||
export const updateFeedback = async (freeText, responseId) => {
|
||||
if (!responseId) {
|
||||
console.error("No response ID available"); // If there is not response ID, no response can be updated.
|
||||
return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
response: {
|
||||
data: {
|
||||
additionalInfo: freeText,
|
||||
},
|
||||
finished: true, // Lets Formbricks calculate Completion Rate
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_FORMBRICKS_COM_API_HOST}/api/v1/client/environments/${process.env.NEXT_PUBLIC_FORMBRICKS_COM_ENVIRONMENT_ID}/responses/${responseId}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
console.error("Error updating response");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error updating response:", error);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
That’s almost it! 🤸
|
||||
|
||||
## 4. Setting it up for testing
|
||||
|
||||
Before you roll it out in production, you want to test it. To do so, you need two things:
|
||||
|
||||
1. Environment ID (1) of the development environment on app.formbricks.com
|
||||
2. Survey ID (2) of your test survey
|
||||
|
||||
When you are on the survey detail page, you’ll find both of them in the URL:
|
||||
|
||||
<Image src={CopyIds} alt="copy IDs" quality="100" className="rounded-lg" />
|
||||
|
||||
Now, you have to replace the IDs and the API host accordingly in your `handleFeedbackSubmit`:
|
||||
|
||||
```tsx
|
||||
const payload = {
|
||||
response: response_data,
|
||||
surveyId: clgwfv4a7002el50ihyuss38x, // This is an example, replace with yours
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
// Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
`https:app.formbricks.com/api/v1/client/environments/clgwcwp4z000lpf0hur7uxbuv/responses`,
|
||||
};
|
||||
```
|
||||
|
||||
And lastly, in the `updateFeedback` function
|
||||
|
||||
```tsx
|
||||
try {
|
||||
const res = await fetch(
|
||||
// Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
`https:app.formbricks.com/api/v1/client/environments/clgwcwp4z000lpf0hur7uxbuv/responses/${responseId}`, // Note that we also updated the API host to 'https://app.formbricks.com/'
|
||||
}
|
||||
```
|
||||
|
||||
### You’re good to go! 🎉
|
||||
|
||||
Something doesn’t work? Check your browser console for the error.
|
||||
|
||||
Can’t figure it out? [Join our Discord!](https://formbricks.com/discord)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -0,0 +1,106 @@
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionText from "./action-text.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Feature Chaser",
|
||||
description: "Follow up with users who used a specific feature. Gather feedback and improve your product.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Feature Chaser
|
||||
|
||||
Following up on specific features only makes sense with very targeted surveys. Formbricks is built for that.
|
||||
|
||||
## Purpose
|
||||
|
||||
Product analytics never tell you why a feature is used - and why not. Following up on specfic features with highly relevant questions is a great way to gather feedback and improve your product.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Feature Chaser" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Trigger survey at exactly the right point in the user journey
|
||||
- Never ask twice, keep your data clean
|
||||
- Prevent survey fatigue with global waiting period
|
||||
|
||||
## Overview
|
||||
|
||||
To run the Feature Chaser survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Feature Chaser survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
2. Setup a user action to display survey at the right point in time
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Feature Chaser
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Feature Chaser”:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions
|
||||
|
||||
The questions you want to ask are dependent on your feature and can be very specific. In the template, we suggest a high-level check on how easy it was for the user to achieve their goal. We also add an opportunity to provide context:
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
Save, and move over to where the magic happens: The “Audience” tab.
|
||||
|
||||
### 3. Set up a trigger for the Feature Chaser survey:
|
||||
|
||||
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](/docs/actions/code) and [No Code Actions](/docs/actions/no-code) 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:
|
||||
|
||||
<Image src={ActionText} alt="Set the trigger by inner Text" quality="100" className="rounded-lg" />
|
||||
|
||||
2. **Trigger by CSS Selector:** In case you have more than one button saying “Export Report” in your app and only want to display the survey when one of them is clicked, you want to be more specific. The best way to do that is to give this button the HTML `id=“export-report-featurename”` and set your user action up like so:
|
||||
|
||||
<Image src={ActionCSS} alt="Set the trigger by CSS Selector" quality="100" className="rounded-lg" />
|
||||
|
||||
Please follow our [Actions manual](/docs/actions/why) for an in-depth description of how Actions work.
|
||||
|
||||
### 4. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 5. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have full freedom to decide who you want to ask. Generally, you only want to ask every user once and prevent survey fatigue. It's up to you to decide if you want to ask again, when the user did not yet reply:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights! 🎉
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
@@ -0,0 +1,106 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
|
||||
import AddAction from "./add-action.png";
|
||||
import AddCSSAction from "./add-css-action.png";
|
||||
import AddHTMLAction from "./add-html-action.png";
|
||||
import ChangeTextContent from "./change-text-content.png";
|
||||
import CreateFeedbackBox from "./create-feedback-box-by-template.png";
|
||||
import PublishSurvey from "./publish-survey.png";
|
||||
import SelectAction from "./select-feedback-button-action.png";
|
||||
import RecontactOptions from "./set-recontact-options.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Feedback Box",
|
||||
description: "The Feedback Box gives your users a direct channel to share their feedback and feel heard.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Feedback Box
|
||||
|
||||
The Feedback Box gives your users a direct channel to share their feedback and feel heard.
|
||||
|
||||
## Purpose
|
||||
|
||||
A low friction way to gather feedback helps catching even the smallest points of frustration in user experiences. Use automations to react rapidly and make users feel heard.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Feedback Box" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Make it easy: 2 clicks to share feedback
|
||||
- Pipe insights where team can see them and react quickly
|
||||
|
||||
## Installation
|
||||
|
||||
To add the Feedback Box to your app, you need to perform these steps:
|
||||
|
||||
1. Create new Feedback Box at app.formbricks.com
|
||||
2. Add user action to trigger Feedback Box
|
||||
3. Update recontact settings to display correctly
|
||||
|
||||
### 1. Create new Feedback Box
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Then, create a new survey and look for the "Feedback Box" template:
|
||||
|
||||
<Image src={CreateFeedbackBox} alt="Create feedback box by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update question content
|
||||
|
||||
Change the questions and answer options according to your preference:
|
||||
|
||||
<Image src={ChangeTextContent} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
### 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:
|
||||
|
||||
<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## You can also add actions in your code {{ class: "text-white" }}
|
||||
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>
|
||||
|
||||
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 grid-cols-2 space-x-2">
|
||||
<Image src={AddHTMLAction} alt="Add HTML action" quality="100" className="rounded-lg" />
|
||||
<Image src={AddCSSAction} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 4. Select action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 5. Set Recontact Options correctly
|
||||
|
||||
Scroll down to “Recontact Options”. Here you have to choose the right settings so that the Feedback Box pops up every time the user action is performed. (Our default is that every user sees every survey only once):
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. You’re ready publish your survey!
|
||||
|
||||
<Image src={PublishSurvey} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
## Setting up the Widget
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# That’s it! 🎉
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
@@ -0,0 +1,115 @@
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionText from "./action-innertext.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Improve Trial Conversion",
|
||||
description: "Understand how to improve the trial conversions to get more paying customers.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Improve Trial Conversion
|
||||
|
||||
When a user doesn't convert, you want to know why. A micro-survey displayed at exactly the right time gives you a window into understanding the most relevant question: To pay or not to pay?
|
||||
|
||||
## Purpose
|
||||
|
||||
The better you understand why free users don’t convert to paid users, the higher your revenue. You can make an informed decision about what to change in your offering to make more people pay for your service.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Improve Trial Conversion" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Ask at exactly the right point in time
|
||||
- Ask to understand the problem, don’t ask for solutions
|
||||
|
||||
## Installation
|
||||
|
||||
To display the Trial Conversion Survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Trial Conversion Survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
2. Set up the user action to display survey at right point in time
|
||||
3. Print that 💸
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Trial Conversion Survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Improve Trial Conversion”:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the questions and answer options. However, based on our experience, we suggest giving the provided template a go 😊
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Note>
|
||||
## Filter by attribute coming soon {{ class: "text-white" }}
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next days.
|
||||
</Note>
|
||||
|
||||
Pre-segmentation isn't relevant for this survey because you likely want to solve all people who cancel their trial. You probably have a specific user action e.g. clicking on "Cancel Trial" you can use to only display the survey to users trialing your product.
|
||||
|
||||
### 4. Set up a trigger for the Trial Conversion Survey:
|
||||
|
||||
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:
|
||||
|
||||
<Image src={ActionPageurl} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
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:
|
||||
|
||||
<Image src={ActionText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
Please have a look at our complete [Actions manual](/docs/actions/why) if you have questions.
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure you gather as many insights as possible. You want to make sure that this survey is always displayed, no matter if the user has already seen a survey in the past days:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# Go get 'em 🎉
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
@@ -0,0 +1,135 @@
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionInner from "./action-innertext.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import AddAction from "./add-action.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreatePrompt from "./create-prompt.png";
|
||||
import InterviewExample from "./interview-example.png";
|
||||
import Publish from "./publish-survey.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "In-app Interview Prompt",
|
||||
description: "Invite only power users to schedule an interview with your product team.",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# In-app Interview Prompt
|
||||
|
||||
The Interview Prompt allows you to pick a specific user segment (e.g. Power Users) and invite them to a user interview. Bye, bye spammy email invites, benefit from up to 6x more respondents.
|
||||
|
||||
## Purpose
|
||||
|
||||
Product analytics and in-app surveys are incomplete without user interviews. Set the scheduling on autopilot for a continuous stream of interviews.
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Interview Prompt" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Pre-segment users with custom attributes. Only invite highly relevant users.
|
||||
- In-app prompts have a 6x higher conversion rate than email invites.
|
||||
- Set scheduling user interviews on auto pilot.
|
||||
- Soon: Integrate directly with your [Cal.com](http://Cal.com) account.
|
||||
|
||||
## Installation
|
||||
|
||||
To display an Interview Prompt in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Interview Prompt at [app.formbricks.com](http://app.formbricks.com/)
|
||||
2. Adjust content and settings
|
||||
3. That’s it! 🎉
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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)
|
||||
</Note>
|
||||
|
||||
### 1. Create new Interview Prompt
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose the template “Interview Prompt”:
|
||||
|
||||
<Image src={CreatePrompt} alt="Create interview prompt by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update prompt and CTA
|
||||
|
||||
Update the prompt, description and button text to match your products tonality. You can also update the button color in the Product Settings.
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
In the button settings you have to make sure it is set to “External URL”. In the URL field, copy your booking link (e.g. https://cal.com/company/user-interview). If you don’t have a booking link yet, head over to [cal.com](http://cal.com) and get one - they have the best free plan out there!
|
||||
|
||||
<Image src={InterviewExample} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
|
||||
Save, and move over to the “Audience” tab.
|
||||
|
||||
### 3. Pre-segment your audience (coming soon)
|
||||
|
||||
<Note>
|
||||
## Filter by attribute coming soon {{ class: "text-white" }}
|
||||
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.
|
||||
|
||||
In our case, we want to select users who we have assigned the attribute “Power User”. To learn how to assign attributes to your users, please [follow this guide](/docs/attributes/why).
|
||||
|
||||
Great, now only the “Power User” segment will see our Interview Prompt. But when will they see it?
|
||||
|
||||
### 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:
|
||||
|
||||
<Image src={AddAction} alt="Add action" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## You can also add actions in your code {{ class: "text-white" }}
|
||||
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>
|
||||
|
||||
Generally, we have two types of user actions: Page views and clicks. The Interview Prompt, you’ll likely want to display 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.
|
||||
|
||||
<Image src={ActionPageurl} alt="Add page URL action" quality="100" className="rounded-lg" />
|
||||
|
||||
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="grid grid-cols-2 space-x-2">
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
<Image src={ActionInner} alt="Add inner text action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 5. Select action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select feedback button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Set Recontact Options correctly
|
||||
|
||||
Scroll down to “Recontact Options”. Here you have to choose the correct settings to strike the right balance between asking for user feedback and preventing survey fatigue. Your settings also depend on the size of your user base or segment. If you e.g. have thousands of “Power Users” you can easily afford to only display the prompt once. If you have a smaller user base you might want to ask twice to get a sufficient amount of bookings:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃 🤸
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# Learn about them users! 🎉
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
117
apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
Normal file
117
apps/formbricks-com/app/docs/best-practices/pmf-survey/page.mdx
Normal file
@@ -0,0 +1,117 @@
|
||||
import DemoPreview from "@/components/dummyUI/DemoPreview";
|
||||
import Image from "next/image";
|
||||
|
||||
import ActionCSS from "./action-css.png";
|
||||
import ActionPageurl from "./action-pageurl.png";
|
||||
import ChangeText from "./change-text.png";
|
||||
import CreateSurvey from "./create-survey.png";
|
||||
import Publish from "./publish.png";
|
||||
import RecontactOptions from "./recontact-options.png";
|
||||
import SelectAction from "./select-action.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Product-Market Fit Survey",
|
||||
description: "The Product-Market Fit survey helps you measure, well, Product-Market Fit (PMF).",
|
||||
};
|
||||
|
||||
[Best Practices]()
|
||||
|
||||
# Product-Market Fit Survey
|
||||
|
||||
## Purpose
|
||||
|
||||
Measuring and understanding your PMF is essential to build a large, successful business. It helps you understand what users like, what they’re missing and what to build next. This survey is perfectly suited to measure PMF like [Superhuman](https://review.firstround.com/how-superhuman-built-an-engine-to-find-product-market-fit).
|
||||
|
||||
## Preview
|
||||
|
||||
<DemoPreview template="Product Market Fit (Superhuman)" />
|
||||
|
||||
## Formbricks Approach
|
||||
|
||||
- Pre-segment users to only survey users who have experienced your products value
|
||||
- Never ask twice, keep your data clean
|
||||
- Run on autopilot: Set up once, keep surveying users continuously
|
||||
|
||||
## Overview
|
||||
|
||||
To display the Product-Market Fit survey in your app you want to proceed as follows:
|
||||
|
||||
1. Create new Product-Market Fit survey at [app.formbricks.com](http://app.formbricks.com/)
|
||||
2. Setup pre-segmentation to assure high data quality
|
||||
3. Setup the user action to display survey at good point in time
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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)
|
||||
</Note>
|
||||
|
||||
### 1. Create new PMF survey
|
||||
|
||||
If you don't have an account yet, create one at [app.formbricks.com](https://app.formbricks.com/auth/signup)
|
||||
|
||||
Click on "Create Survey" and choose one of the PMF survey templates. The first one is rather short, the latter builds on the ["Product-Market Fit Engine"](https://review.firstround.com/how-superhuman-built-an-engine-to-find-product-market-fit) developed by Superhuman:
|
||||
|
||||
<Image src={CreateSurvey} alt="Create survey by template" quality="100" className="rounded-lg" />
|
||||
|
||||
### 2. Update questions (if you like)
|
||||
|
||||
You’re free to update the question and answer options. However, based on our experience, we suggest giving the provided template a go 😊 Here is a very [detailed description](https://coda.io/@rahulvohra/superhuman-product-market-fit-engine) of what to do with the data you’re collecting.
|
||||
|
||||
<Image src={ChangeText} alt="Change text content" quality="100" className="rounded-lg" />
|
||||
|
||||
_Want to change the button color? You can do so in the product settings!_
|
||||
|
||||
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 {{ class: "text-white" }}
|
||||
We're working on pre-segmenting users by attributes. We will update this manual in the next days.
|
||||
</Note>
|
||||
|
||||
To run this survey properly, you should pre-segment your user base. As touched upon earlier: if you ask every user you’ll get lots of opinions which are often misleading. You only want to gather feedback from people who invested the time to get to know and use your product:
|
||||
|
||||
**Filter by attribute**: You can keep the logic to decide if a user has (or has not) experienced value in your application. This makes most sense if you want to use historic usage data to decide if a user qualifies or not. Create your logic and if it applies, send an attribute to Formbricks by e.g. `formbricks.setAttribute("Loyalty", "Experienced Value");` Here is the full manual on how to [set attributes](/docs/attributes/custom-attributes).
|
||||
|
||||
**Filter by actions (coming soon)**: Later, you can also segment users based on events tracked with Formbricks. However, this makes it impossible to use historic usage data (pre Formbricks usage). Here we will have a few options to achieve that:
|
||||
|
||||
- Check the time passed since sign-up (e.g. signed up 4 weeks ago)
|
||||
- User has performed a specific action a certain number of times or (e.g. created 5 reports)
|
||||
- User has performed a combination of actions (e.g. created a report **and** invited a team member)
|
||||
|
||||
This way you make sure that you separate potentially misleading opinions from valuable insights.
|
||||
|
||||
### 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](/docs/actions/why) if you are not sure how to set them up:
|
||||
|
||||
<div className="grid grid-cols-2 space-x-2">
|
||||
<Image src={ActionCSS} alt="Add CSS action" quality="100" className="rounded-lg" />
|
||||
<Image src={ActionPageurl} alt="Add inner text action" quality="100" className="rounded-lg" />
|
||||
</div>
|
||||
|
||||
### 5. Select Action in the “When to ask” card
|
||||
|
||||
<Image src={SelectAction} alt="Select PMF trigger button action" quality="100" className="rounded-lg" />
|
||||
|
||||
### 6. Last step: Set Recontact Options correctly
|
||||
|
||||
Lastly, scroll down to “Recontact Options”. Here you have to choose the correct settings to make sure your data remains of high quality. You want to make sure that this survey is only responded to once per user. It is up to you to decide if you want to display it several times until the user responds:
|
||||
|
||||
<Image src={RecontactOptions} alt="Set recontact options" quality="100" className="rounded-lg" />
|
||||
|
||||
### 7. Congrats! You’re ready to publish your survey 💃
|
||||
|
||||
<Image src={Publish} alt="Publish survey" quality="100" className="rounded-lg" />
|
||||
|
||||
<Note>
|
||||
## Formbricks Widget running? {{ class: "text-white" }}
|
||||
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) to install the widget.
|
||||
</Note>
|
||||
|
||||
###
|
||||
|
||||
# Get those insights!
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
116
apps/formbricks-com/app/docs/client-api/create-response/page.mdx
Normal file
116
apps/formbricks-com/app/docs/client-api/create-response/page.mdx
Normal file
@@ -0,0 +1,116 @@
|
||||
export const meta = {
|
||||
title: "API: Create response",
|
||||
description: "Learn how to create a new response to a survey via API.",
|
||||
};
|
||||
|
||||
[Client API]()
|
||||
|
||||
# API: Create Response
|
||||
|
||||
## Create a response {{ tag: 'POST', label: '/api/v1/client/responses' }}
|
||||
|
||||
Add a new response to a survey.
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
### Mandatory Body Fields
|
||||
|
||||
<Properties>
|
||||
<Property name="surveyId" type="string">
|
||||
The id of the survey the response belongs to.
|
||||
</Property>
|
||||
<Property name="finished" type="boolean">
|
||||
Marks whether the response is complete or not.
|
||||
</Property>
|
||||
<Property name="data" type="string">
|
||||
The data of the response as JSON object (key: questionId, value: answer).
|
||||
</Property>
|
||||
|
||||
</Properties>
|
||||
|
||||
### Optional Body Fields
|
||||
|
||||
<Properties>
|
||||
<Property name="personId" type="string" required>
|
||||
Internal Formbricks id to identify the user sending the response
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
### Parameters Explained
|
||||
|
||||
| field name | required | default | description |
|
||||
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
|
||||
| personId | no | - | The person this response is connected to. |
|
||||
| surveyId | yes | - | The survey this response is connected to. |
|
||||
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses' \
|
||||
--data-raw '{
|
||||
"surveyId":"clfqz1esd0000yzah51trddn8",
|
||||
"personId": "clfqjny0v000ayzgsycx54a2c",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
```json {{ title: 'Example Request Body' }}
|
||||
{
|
||||
"personId": "clfqjny0v000ayzgsycx54a2c",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
<CodeGroup title="Response">
|
||||
|
||||
```json {{ title: '200 Success' }}
|
||||
{
|
||||
"data": {
|
||||
"id": "clisyqeoi000219t52m5gopke",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"person": {
|
||||
"id": "clfqjny0v000ayzgsycx54a2c",
|
||||
"attributes": {
|
||||
"email": "me@johndoe.com"
|
||||
}
|
||||
},
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json {{ title: '400 Bad Request' }}
|
||||
{
|
||||
"code": "bad_request",
|
||||
"message": "surveyId was not provided.",
|
||||
"details": {
|
||||
"surveyId": "This field is required."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
13
apps/formbricks-com/app/docs/client-api/overview/page.mdx
Normal file
13
apps/formbricks-com/app/docs/client-api/overview/page.mdx
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Fence } from "@/components/shared/Fence";
|
||||
|
||||
export const meta = {
|
||||
title: "Client API Overview",
|
||||
description:
|
||||
"Explore the Formbricks Public Client API for client-side tasks and integration into your website.",
|
||||
};
|
||||
|
||||
[Client API]()
|
||||
|
||||
# Client API Overview
|
||||
|
||||
The Public Client API is designed for the JavaScript SDK and does not require authentication. It's primarily used for creating persons, sessions, and responses within the Formbricks platform. This API is ideal for client-side interactions, as it doesn't expose sensitive information.
|
||||
103
apps/formbricks-com/app/docs/client-api/update-response/page.mdx
Normal file
103
apps/formbricks-com/app/docs/client-api/update-response/page.mdx
Normal file
@@ -0,0 +1,103 @@
|
||||
export const meta = {
|
||||
title: "API: Update submission",
|
||||
description: "Learn how to update a new response to a survey via API.",
|
||||
};
|
||||
|
||||
[Client API]()
|
||||
|
||||
# API: Update Response
|
||||
|
||||
Update an existing response in a survey.
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
### Mandatory Body Fields
|
||||
|
||||
<Properties>
|
||||
<Property name="data" type="string">
|
||||
The data of the response as JSON object (key: questionId, value: answer).
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
### Parameters Explained
|
||||
|
||||
| field name | required | default | description |
|
||||
| ---------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| data | yes | - | The response data object (answers to the survey). In this object the key is the questionId, the value the answer of the user to this question. |
|
||||
| finished | yes | false | Mark a response as complete to be able to filter accordingly. |
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="POST" label="/api/v1/client/responses/[responseId]">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl --location --request POST 'https://app.formbricks.com/api/v1/client/responses/[responseId]' \
|
||||
--data-raw '{
|
||||
"personId": "clfqjny0v000ayzgsycx54a2c",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clggpvpvu0009n40g8ikawby8": 5,
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
```json {{ title: 'Example Request Body' }}
|
||||
{
|
||||
"personId": "clfqjny0v000ayzgsycx54a2c",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"data": {
|
||||
"clggpvpvu0009n40g8ikawby8": 5,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
<CodeGroup title="Response">
|
||||
|
||||
```json {{ title: '200 Success' }}
|
||||
{
|
||||
"data": {
|
||||
"id": "clisyqeoi000219t52m5gopke",
|
||||
"surveyId": "clfqz1esd0000yzah51trddn8",
|
||||
"finished": true,
|
||||
"person": {
|
||||
"id": "clfqjny0v000ayzgsycx54a2c",
|
||||
"attributes": {
|
||||
"email": "me@johndoe.com"
|
||||
}
|
||||
},
|
||||
"data": {
|
||||
"clfqjny0v0003yzgscnog1j9i": 10,
|
||||
"clfqjtn8n0070yzgs6jgx9rog": "I love Formbricks",
|
||||
"clggpvpvu0009n40g8ikawby8": 5
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json {{ title: '400 Bad Request' }}
|
||||
{
|
||||
"code": "bad_request",
|
||||
"message": "data was not provided.",
|
||||
"details": {
|
||||
"data": "This field is required."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```json {{ title: '404 Not Found' }}
|
||||
{
|
||||
"code": "not_found",
|
||||
"message": "Response not found"
|
||||
}
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -1,394 +0,0 @@
|
||||
export const metadata = {
|
||||
title: 'Contacts',
|
||||
description:
|
||||
'On this page, we’ll dive into the different contact endpoints you can use to manage contacts programmatically.',
|
||||
}
|
||||
|
||||
# Contacts
|
||||
|
||||
As the name suggests, contacts are a core part of Protocol — the very reason Protocol exists is so you can have secure conversations with your contacts. On this page, we'll dive into the different contact endpoints you can use to manage contacts programmatically. We'll look at how to query, create, update, and delete contacts. {{ className: 'lead' }}
|
||||
|
||||
## The contact model
|
||||
|
||||
The contact model contains all the information about your contacts, such as their username, avatar, and phone number. It also contains a reference to the conversation between you and the contact and information about when they were last active on Protocol.
|
||||
|
||||
### Properties
|
||||
|
||||
<Properties>
|
||||
<Property name="id" type="string">
|
||||
Unique identifier for the contact.
|
||||
</Property>
|
||||
<Property name="username" type="string">
|
||||
The username for the contact.
|
||||
</Property>
|
||||
<Property name="phone_number" type="string">
|
||||
The phone number for the contact.
|
||||
</Property>
|
||||
<Property name="avatar_url" type="string">
|
||||
The avatar image URL for the contact.
|
||||
</Property>
|
||||
<Property name="display_name" type="string">
|
||||
The contact display name in the contact list. By default, this is just the
|
||||
username.
|
||||
</Property>
|
||||
<Property name="conversation_id" type="string">
|
||||
Unique identifier for the conversation associated with the contact.
|
||||
</Property>
|
||||
<Property name="last_active_at" type="timestamp">
|
||||
Timestamp of when the contact was last active on the platform.
|
||||
</Property>
|
||||
<Property name="created_at" type="timestamp">
|
||||
Timestamp of when the contact was created.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
---
|
||||
|
||||
## List all contacts {{ tag: 'GET', label: '/v1/contacts' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve a paginated list of all your contacts. By default, a maximum of ten contacts are shown per page.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="limit" type="integer">
|
||||
Limit the number of contacts returned.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/contacts">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -G https://api.protocol.chat/v1/contacts \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d active=true \
|
||||
-d limit=10
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.contacts.list()
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.contacts.list()
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->contacts->list();
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"has_more": false,
|
||||
"data": [
|
||||
{
|
||||
"id": "WAz8eIbvDR60rouK",
|
||||
"username": "FrankMcCallister",
|
||||
"phone_number": "1-800-759-3000",
|
||||
"avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
|
||||
"display_name": null,
|
||||
"conversation_id": "xgQQXg3hrtjh7AvZ",
|
||||
"last_active_at": 705103200,
|
||||
"created_at": 692233200
|
||||
},
|
||||
{
|
||||
"id": "hSIhXBhNe8X1d8Et"
|
||||
// ...
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Create a contact {{ tag: 'POST', label: '/v1/contacts' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to add a new contact to your contact list in Protocol. To add a contact, you must provide their Protocol username and phone number.
|
||||
|
||||
### Required attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="username" type="string">
|
||||
The username for the contact.
|
||||
</Property>
|
||||
<Property name="phone_number" type="string">
|
||||
The phone number for the contact.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="avatar_url" type="string">
|
||||
The avatar image URL for the contact.
|
||||
</Property>
|
||||
<Property name="display_name" type="string">
|
||||
The contact display name in the contact list. By default, this is just the username.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="POST" label="/v1/contacts">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/contacts \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d username="FrankMcCallister" \
|
||||
-d phone_number="1-800-759-3000" \
|
||||
-d avatar_url="https://assets.protocol.chat/avatars/frank.jpg"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.contacts.create({
|
||||
username: 'FrankMcCallister',
|
||||
phone_number: '1-800-759-3000',
|
||||
avatar_url: 'https://assets.protocol.chat/avatars/frank.jpg',
|
||||
})
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.contacts.create(
|
||||
username="FrankMcCallister",
|
||||
phone_number="1-800-759-3000",
|
||||
avatar_url="https://assets.protocol.chat/avatars/frank.jpg",
|
||||
)
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->contacts->create([
|
||||
'username' => 'FrankMcCallister',
|
||||
'phone_number' => '1-800-759-3000',
|
||||
'avatar_url' => 'https://assets.protocol.chat/avatars/frank.jpg',
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "WAz8eIbvDR60rouK",
|
||||
"username": "FrankMcCallister",
|
||||
"phone_number": "1-800-759-3000",
|
||||
"avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
|
||||
"display_name": null,
|
||||
"conversation_id": "xgQQXg3hrtjh7AvZ",
|
||||
"last_active_at": null,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Retrieve a contact {{ tag: 'GET', label: '/v1/contacts/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve a contact by providing their Protocol id. Refer to [the list](#the-contact-model) at the top of this page to see which properties are included with contact objects.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/contacts/WAz8eIbvDR60rouK">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/contacts/WAz8eIbvDR60rouK \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.contacts.get('WAz8eIbvDR60rouK')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.contacts.get("WAz8eIbvDR60rouK")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->contacts->get('WAz8eIbvDR60rouK');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "WAz8eIbvDR60rouK",
|
||||
"username": "FrankMcCallister",
|
||||
"phone_number": "1-800-759-3000",
|
||||
"avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
|
||||
"display_name": null,
|
||||
"conversation_id": "xgQQXg3hrtjh7AvZ",
|
||||
"last_active_at": 705103200,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Update a contact {{ tag: 'PUT', label: '/v1/contacts/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to perform an update on a contact. Currently, the only attribute that can be updated on contacts is the `display_name` attribute which controls how a contact appears in your contact list in Protocol.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="display_name" type="string">
|
||||
The contact display name in the contact list. By default, this is just the username.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="PUT" label="/v1/contacts/WAz8eIbvDR60rouK">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X PUT https://api.protocol.chat/v1/contacts/WAz8eIbvDR60rouK \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d display_name="UncleFrank"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.contacts.update('WAz8eIbvDR60rouK', {
|
||||
display_name: 'UncleFrank',
|
||||
})
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.contacts.update("WAz8eIbvDR60rouK", display_name="UncleFrank")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->contacts->update('WAz8eIbvDR60rouK', [
|
||||
'display_name' => 'UncleFrank',
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "WAz8eIbvDR60rouK",
|
||||
"username": "FrankMcCallister",
|
||||
"phone_number": "1-800-759-3000",
|
||||
"avatar_url": "https://assets.protocol.chat/avatars/frank.jpg",
|
||||
"display_name": "UncleFrank",
|
||||
"conversation_id": "xgQQXg3hrtjh7AvZ",
|
||||
"last_active_at": 705103200,
|
||||
"created_at": 692233200
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Delete a contact {{ tag: 'DELETE', label: '/v1/contacts/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to delete contacts from your contact list in Protocol. Note: This will also delete your conversation with the given contact.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="DELETE" label="/v1/contacts/WAz8eIbvDR60rouK">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X DELETE https://api.protocol.chat/v1/contacts/WAz8eIbvDR60rouK \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.contacts.delete('WAz8eIbvDR60rouK')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.contacts.delete("WAz8eIbvDR60rouK")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->contacts->delete('WAz8eIbvDR60rouK');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
BIN
apps/formbricks-com/app/docs/contributing/demo/demoapp.png
Normal file
BIN
apps/formbricks-com/app/docs/contributing/demo/demoapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
66
apps/formbricks-com/app/docs/contributing/demo/page.mdx
Normal file
66
apps/formbricks-com/app/docs/contributing/demo/page.mdx
Normal file
@@ -0,0 +1,66 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import DemoApp from "./demoapp.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Demo App",
|
||||
description: "To test in-app surveys, trigger actions and set attributes, you can use the Demo App.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
|
||||
# Demo App
|
||||
|
||||
To play around with the in-app [User Actions](/docs/actions/why), you can use the Demo App. It's a simple React app that you can run locally and use to trigger actions and set [Attributes](/docs/attributes/why).
|
||||
|
||||
<Image src={DemoApp} alt="Demo App Preview" quality="100" className="rounded-lg" />
|
||||
|
||||
## Functionality
|
||||
|
||||
### Code Action
|
||||
|
||||
This button sends a <a href="/docs/actions/code">Code Action</a> to the Formbricks API called 'Code Action'. You will find it in the Actions Tab.
|
||||
|
||||
```tsx
|
||||
formbricks.track("Code Action");
|
||||
```
|
||||
|
||||
### No Code Action
|
||||
|
||||
This button sends a <a href="/docs/actions/no-code">No Code Action</a> as long as you created it beforehand in the Formbricks App. For it to work, you need to add the No Code Action within Formbricks.
|
||||
|
||||
```tsx
|
||||
<button>No-Code Action</button>
|
||||
```
|
||||
|
||||
### Set Plan to "Free"
|
||||
|
||||
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Free'. If the attribute does not exist, it creates it.
|
||||
|
||||
```tsx
|
||||
formbricks.setAttribute("Plan", "Free");
|
||||
```
|
||||
|
||||
### Set Plan to "Paid"
|
||||
|
||||
This button sets the <a href="/docs/attributes/custom-attributes">attribute</a> 'Plan' to 'Paid'. If the attribute does not exist, it creates it.
|
||||
|
||||
```tsx
|
||||
formbricks.setAttribute("Plan", "Paid");
|
||||
```
|
||||
|
||||
### Set Email
|
||||
|
||||
This button sets the <a href="/docs/attributes/identify-users">user email</a> 'test@web.com'
|
||||
|
||||
```tsx
|
||||
formbricks.setEmail("test@web.com");
|
||||
```
|
||||
|
||||
### Set UserId
|
||||
|
||||
This button sets an external <a href="/docs/attributes/identify-users">user ID</a> to 'THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING'
|
||||
|
||||
```tsx
|
||||
formbricks.setUserId("THIS-IS-A-VERY-LONG-USER-ID-FOR-TESTING");
|
||||
```
|
||||
@@ -0,0 +1,38 @@
|
||||
export const meta = {
|
||||
title: "Contribution Guide",
|
||||
description: "How to contribute to Formbricks",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
|
||||
# Contribution Guide
|
||||
|
||||
We are so happy that you are interested in contributing to Formbricks 🤗
|
||||
|
||||
There are many ways to contribute to Formbricks with writing Issues, fixing bugs, building new features or updating the docs.
|
||||
|
||||
## Issues
|
||||
|
||||
Spotted a bug? Has deployment gone wrong? Do you have user feedback? [Raise an issue](https://github.com/formbricks/formbricks/issues/new/choose) for the fastest response.
|
||||
|
||||
... or pick up and fix an issue if you want to do a Pull Request.
|
||||
|
||||
## Feature requests
|
||||
|
||||
Raise an issue for these and tag it as an Enhancement. We love every idea. Please give us as much context on the why as possible.
|
||||
|
||||
## Creating a PR
|
||||
|
||||
Please fork the repository, make your changes and create a new pull request if you want to make an update.
|
||||
|
||||
If you want to speak to us before doing lots of work, please join our [Discord server](https://formbricks.com/discord) and tell us what you would like to work on - we're very responsive and friendly!
|
||||
|
||||
For QA of your Pull-Request, you can also get in touch with Matti on Discord. But we will also get to your PR without you taking additional action ;-)
|
||||
|
||||
## Features
|
||||
|
||||
We are currently working on having a clear [Roadmap](https://github.com/formbricks/formbricks) for the next steps ahead.
|
||||
|
||||
But you can also pick a feature that is not already on the roadmap if you think it creates a positive impact for Formbricks.
|
||||
|
||||
If you are at all unsure, just raise it as an enhancement issue first and tell us that you like to work on it, and we'll very quickly respond.
|
||||
81
apps/formbricks-com/app/docs/contributing/setup/page.mdx
Normal file
81
apps/formbricks-com/app/docs/contributing/setup/page.mdx
Normal file
@@ -0,0 +1,81 @@
|
||||
export const meta = {
|
||||
title: "Setup Dev Environment",
|
||||
description: "Setup a development environment for Formbricks.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
|
||||
# Setup Dev Environment
|
||||
|
||||
To get the project running locally on your machine you need to have the following development tools installed:
|
||||
|
||||
- Node.JS (we recommend v18)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
- [Docker](https://www.docker.com/) (to run PostgreSQL / MailHog)
|
||||
|
||||
1. Clone the project:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/formbricks/formbricks
|
||||
```
|
||||
|
||||
and move into the directory
|
||||
|
||||
```bash
|
||||
cd formbricks
|
||||
```
|
||||
|
||||
1. Install Node.JS packages via pnpm. Don't have pnpm? Get it [here](https://pnpm.io/installation)
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
1. Create a `.env` file based on `.env.example`. It's already preset to work with the docker-compose setup but you can also change values if needed.
|
||||
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
1. Make sure you have [`Docker`](https://docs.docker.com/compose/) & [`docker-compose`](https://docs.docker.com/compose/) installed and running on your machine. Then run the following command to start the formbricks dev setup:
|
||||
|
||||
```bash
|
||||
pnpm go
|
||||
```
|
||||
|
||||
This starts the Formbricks main app (plus all its dependencies) as well as the following services using Docker:
|
||||
|
||||
- a `postgres` container for hosting your database,
|
||||
- a `mailhog` container that acts as a mock SMTP server and shows received mails in a web UI (forwarded to your host's `localhost:8025`)
|
||||
|
||||
**You can now access the Formbricks app on [http://localhost:3000](http://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.
|
||||
|
||||
For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)
|
||||
|
||||
### Build
|
||||
|
||||
To build all apps and packages and check for build errors, run the following command:
|
||||
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### Access Demo app
|
||||
|
||||
To run the [Demo app](/docs/contributing/demo), run the following command in a separate terminal window:
|
||||
|
||||
```bash
|
||||
pnpm dev --filter=demo
|
||||
```
|
||||
|
||||
You can now access the Demo app on [http://localhost:3002](http://localhost:3002).
|
||||
|
||||
### Access Formbricks website
|
||||
|
||||
If you want to make changes to the Formbricks website, e.g. to update the documentation, run the following command in a separate terminal window:
|
||||
|
||||
```bash
|
||||
pnpm dev --filter=formbricks-com
|
||||
```
|
||||
|
||||
You can now access the Formbricks website on [http://localhost:3001](http://localhost:3001).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
@@ -0,0 +1,64 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import ClearAppData from "./clear-app-data.png";
|
||||
import UncaughtPromise from "./uncaught-promise.png";
|
||||
import Logout from "./logout.png";
|
||||
|
||||
export const meta = {
|
||||
title: "Troubleshooting",
|
||||
description:
|
||||
"Formbricks is a complex application in constant development. Sometimes, things don't go as planned. Here are some tips to help you troubleshoot.",
|
||||
};
|
||||
|
||||
[Contributing]()
|
||||
|
||||
# Troubleshooting
|
||||
|
||||
Here you'll find help with Frequently Recurring Problems
|
||||
|
||||
## "The app doesn't work after doing a prisma migration"
|
||||
|
||||
This can happen but fear not, the fix is easy: Delete the application storage of your browser and reload the page. This will force the app to re-fetch the data from the server:
|
||||
|
||||
<Image src={ClearAppData} alt="Demo App Preview" quality="100" className="rounded-lg" />
|
||||
|
||||
## "I ran 'pnpm i' but there seems to be an error with the packages"
|
||||
|
||||
If nothing helps, run `pnpm clean` and then `pnpm i` again. This solves a lot.
|
||||
|
||||
## "I get a full-screen error with cryptic strings"
|
||||
|
||||
This usually happens when the Formbricks Widget wasn't correctly or completely built.
|
||||
|
||||
```bash
|
||||
// Build formbricks-js first
|
||||
pnpm build --filter=js
|
||||
|
||||
// Run the app again
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## My machine struggles with the repository
|
||||
|
||||
Since we're working with a monorepo structure, the repository can get quite big. If you're having trouble working with the repository, try the following:
|
||||
|
||||
```bash
|
||||
// Only run the Formbricks app
|
||||
pnpm dev --filter=web...
|
||||
|
||||
// Only run the landing page app
|
||||
pnpm dev --filter=formbricks-com...
|
||||
|
||||
// Only run the demo app
|
||||
pnpm dev --filter=demo...
|
||||
```
|
||||
|
||||
However, in our experience it's better to run `pnpm dev` than having two terminals open (one with the Formbricks app and one with the demo).
|
||||
|
||||
## Uncaught (in promise) SyntaxError: Unexpected token !DOCTYPE ... is not valid JSON
|
||||
|
||||
<Image src={UncaughtPromise} alt="Uncaught promise" quality="100" className="rounded-lg" />
|
||||
|
||||
This happens when you're using the Demo App and delete the Person within the Formbricks app which the widget is currently connected with. We're fixing it, but you can also just logout your test person and reload the page to get rid of it.
|
||||
|
||||
<Image src={Logout} alt="Logout Person" quality="100" className="rounded-lg" />
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
@@ -1,407 +0,0 @@
|
||||
export const metadata = {
|
||||
title: 'Conversations',
|
||||
description:
|
||||
'On this page, we’ll dive into the different conversation endpoints you can use to manage conversations programmatically.',
|
||||
}
|
||||
|
||||
# Conversations
|
||||
|
||||
Conversations are an essential part of Protocol — they are the containers for the messages between you, your contacts, and groups. On this page, we’ll dive into the different conversation endpoints you can use to manage conversations programmatically. We'll look at how to query, create, update, and delete conversations. {{ className: 'lead' }}
|
||||
|
||||
## The conversation model
|
||||
|
||||
The conversation model contains all the information about the conversations between you and your contacts. In addition, conversations can also be group-based with more than one contact, they can have a pinned message, and they can be muted.
|
||||
|
||||
### Properties
|
||||
|
||||
<Properties>
|
||||
<Property name="id" type="string">
|
||||
Unique identifier for the conversation.
|
||||
</Property>
|
||||
<Property name="contact_id" type="string">
|
||||
Unique identifier for the other contact in the conversation.
|
||||
</Property>
|
||||
<Property name="group_id" type="string">
|
||||
Unique identifier for the group that the conversation belongs to.
|
||||
</Property>
|
||||
<Property name="pinned_message_id" type="string">
|
||||
Unique identifier for the pinned message.
|
||||
</Property>
|
||||
<Property name="is_pinned" type="boolean">
|
||||
Whether or not the conversation has been pinned.
|
||||
</Property>
|
||||
<Property name="is_muted" type="boolean">
|
||||
Whether or not the conversation has been muted.
|
||||
</Property>
|
||||
<Property name="last_active_at" type="timestamp">
|
||||
Timestamp of when the conversation was last active.
|
||||
</Property>
|
||||
<Property name="last_opened_at" type="timestamp">
|
||||
Timestamp of when the conversation was last opened by the authenticated
|
||||
user.
|
||||
</Property>
|
||||
<Property name="created_at" type="timestamp">
|
||||
Timestamp of when the conversation was created.
|
||||
</Property>
|
||||
<Property name="archived_at" type="timestamp">
|
||||
Timestamp of when the conversation was archived.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
---
|
||||
|
||||
## List all conversations {{ tag: 'GET', label: '/v1/conversations' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve a paginated list of all your conversations. By default, a maximum of ten conversations are shown per page.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="limit" type="integer">
|
||||
Limit the number of conversations returned.
|
||||
</Property>
|
||||
<Property name="muted" type="boolean">
|
||||
Only show conversations that are muted when set to `true`.
|
||||
</Property>
|
||||
<Property name="archived" type="boolean">
|
||||
Only show conversations that are archived when set to `true`.
|
||||
</Property>
|
||||
<Property name="pinned" type="boolean">
|
||||
Only show conversations that are pinned when set to `true`.
|
||||
</Property>
|
||||
<Property name="group_id" type="string">
|
||||
Only show conversations for the specified group.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/conversations">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -G https://api.protocol.chat/v1/conversations \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d limit=10
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.conversations.list()
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.conversations.list()
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->conversations->list();
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"has_more": false,
|
||||
"data": [
|
||||
{
|
||||
"id": "xgQQXg3hrtjh7AvZ",
|
||||
"contact_id": "WAz8eIbvDR60rouK",
|
||||
"group_id": null,
|
||||
"pinned_message_id": null,
|
||||
"is_pinned": false,
|
||||
"is_muted": false,
|
||||
"last_active_at": 705103200,
|
||||
"last_opened_at": 705103200,
|
||||
"created_at": 692233200,
|
||||
"archived_at": null
|
||||
},
|
||||
{
|
||||
"id": "hSIhXBhNe8X1d8Et"
|
||||
// ...
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Create a conversation {{ tag: 'POST', label: '/v1/conversations' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to add a new conversation between you and a contact or group. A contact or group id is required to create a conversation.
|
||||
|
||||
### Required attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="contact_id" type="string">
|
||||
Unique identifier for the other contact in the conversation.
|
||||
</Property>
|
||||
<Property name="group_id" type="string">
|
||||
Unique identifier for the group that the conversation belongs to.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="POST" label="/v1/conversations">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/conversations \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d 'contact_id'="WAz8eIbvDR60rouK"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.conversations.create({
|
||||
contact_id: 'WAz8eIbvDR60rouK',
|
||||
})
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.conversations.create(contact_id="WAz8eIbvDR60rouK")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->conversations->create([
|
||||
'contact_id' => 'WAz8eIbvDR60rouK',
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "xgQQXg3hrtjh7AvZ",
|
||||
"contact_id": "WAz8eIbvDR60rouK",
|
||||
"group_id": null,
|
||||
"pinned_message_id": null,
|
||||
"is_pinned": false,
|
||||
"is_muted": false,
|
||||
"last_active_at": null,
|
||||
"last_opened_at": null,
|
||||
"created_at": 692233200,
|
||||
"archived_at": null
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Retrieve a conversation {{ tag: 'GET', label: '/v1/conversations/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to retrieve a conversation by providing the conversation id. Refer to [the list](#the-conversation-model) at the top of this page to see which properties are included with conversation objects.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="GET" label="/v1/conversations/xgQQXg3hrtjh7AvZ">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl https://api.protocol.chat/v1/conversations/xgQQXg3hrtjh7AvZ \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.conversations.get('xgQQXg3hrtjh7AvZ')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.conversations.get("xgQQXg3hrtjh7AvZ")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->conversations->get('xgQQXg3hrtjh7AvZ');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "xgQQXg3hrtjh7AvZ",
|
||||
"contact_id": "WAz8eIbvDR60rouK",
|
||||
"group_id": null,
|
||||
"pinned_message_id": null,
|
||||
"is_pinned": false,
|
||||
"is_muted": false,
|
||||
"last_active_at": 705103200,
|
||||
"last_opened_at": 705103200,
|
||||
"created_at": 692233200,
|
||||
"archived_at": null
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Update a conversation {{ tag: 'PUT', label: '/v1/conversations/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to perform an update on a conversation. Examples of updates are pinning a message, muting or archiving the conversation, or pinning the conversation itself.
|
||||
|
||||
### Optional attributes
|
||||
|
||||
<Properties>
|
||||
<Property name="pinned_message_id" type="string">
|
||||
Unique identifier for the pinned message.
|
||||
</Property>
|
||||
<Property name="is_pinned" type="boolean">
|
||||
Whether or not the conversation has been pinned.
|
||||
</Property>
|
||||
<Property name="is_muted" type="boolean">
|
||||
Whether or not the conversation has been muted.
|
||||
</Property>
|
||||
<Property name="archived_at" type="timestamp">
|
||||
Timestamp of when the conversation was archived.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="PUT" label="/v1/conversations/xgQQXg3hrtjh7AvZ">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X PUT https://api.protocol.chat/v1/conversations/xgQQXg3hrtjh7AvZ \
|
||||
-H "Authorization: Bearer {token}" \
|
||||
-d 'is_muted'=true
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.conversations.update('xgQQXg3hrtjh7AvZ', {
|
||||
is_muted: true,
|
||||
})
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.conversations.update("xgQQXg3hrtjh7AvZ", is_muted=True)
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->conversations->update('xgQQXg3hrtjh7AvZ', [
|
||||
'is_muted' => true,
|
||||
]);
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
```json {{ title: 'Response' }}
|
||||
{
|
||||
"id": "xgQQXg3hrtjh7AvZ",
|
||||
"contact_id": "WAz8eIbvDR60rouK",
|
||||
"group_id": null,
|
||||
"pinned_message_id": null,
|
||||
"is_pinned": false,
|
||||
"is_muted": true,
|
||||
"last_active_at": 705103200,
|
||||
"last_opened_at": 705103200,
|
||||
"created_at": 692233200,
|
||||
"archived_at": null
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
---
|
||||
|
||||
## Delete a conversation {{ tag: 'DELETE', label: '/v1/conversations/:id' }}
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
This endpoint allows you to delete your conversations in Protocol. Note: This will permanently delete the conversation and all its messages — archive it instead if you want to be able to restore it later.
|
||||
|
||||
</Col>
|
||||
<Col sticky>
|
||||
|
||||
<CodeGroup title="Request" tag="DELETE" label="/v1/conversations/xgQQXg3hrtjh7AvZ">
|
||||
|
||||
```bash {{ title: 'cURL' }}
|
||||
curl -X DELETE https://api.protocol.chat/v1/conversations/xgQQXg3hrtjh7AvZ \
|
||||
-H "Authorization: Bearer {token}"
|
||||
```
|
||||
|
||||
```js
|
||||
import ApiClient from '@example/protocol-api'
|
||||
|
||||
const client = new ApiClient(token)
|
||||
|
||||
await client.conversations.delete('xgQQXg3hrtjh7AvZ')
|
||||
```
|
||||
|
||||
```python
|
||||
from protocol_api import ApiClient
|
||||
|
||||
client = ApiClient(token)
|
||||
|
||||
client.conversations.delete("xgQQXg3hrtjh7AvZ")
|
||||
```
|
||||
|
||||
```php
|
||||
$client = new \Protocol\ApiClient($token);
|
||||
|
||||
$client->conversations->delete('xgQQXg3hrtjh7AvZ');
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
@@ -1,70 +0,0 @@
|
||||
export const metadata = {
|
||||
title: 'Errors',
|
||||
description:
|
||||
'In this guide, we will talk about what happens when something goes wrong while you work with the API.',
|
||||
}
|
||||
|
||||
# Errors
|
||||
|
||||
In this guide, we will talk about what happens when something goes wrong while you work with the API. Mistakes happen, and mostly they will be yours, not ours. Let's look at some status codes and error types you might encounter. {{ className: 'lead' }}
|
||||
|
||||
You can tell if your request was successful by checking the status code when receiving an API response. If a response comes back unsuccessful, you can use the error type and error message to figure out what has gone wrong and do some rudimentary debugging (before contacting support).
|
||||
|
||||
<Note>
|
||||
Before reaching out to support with an error, please be aware that 99% of all
|
||||
reported errors are, in fact, user errors. Therefore, please carefully check
|
||||
your code before contacting Protocol support.
|
||||
</Note>
|
||||
|
||||
---
|
||||
|
||||
## Status codes
|
||||
|
||||
Here is a list of the different categories of status codes returned by the Protocol API. Use these to understand if a request was successful.
|
||||
|
||||
<Properties>
|
||||
<Property name="2xx">
|
||||
A 2xx status code indicates a successful response.
|
||||
</Property>
|
||||
<Property name="4xx">
|
||||
A 4xx status code indicates a client error — this means it's a _you_
|
||||
problem.
|
||||
</Property>
|
||||
<Property name="5xx">
|
||||
A 5xx status code indicates a server error — you won't be seeing these.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
---
|
||||
|
||||
## Error types
|
||||
|
||||
<Row>
|
||||
<Col>
|
||||
|
||||
Whenever a request is unsuccessful, the Protocol API will return an error response with an error type and message. You can use this information to understand better what has gone wrong and how to fix it. Most of the error messages are pretty helpful and actionable.
|
||||
|
||||
Here is a list of the two error types supported by the Protocol API — use these to understand what you have done wrong.
|
||||
|
||||
<Properties>
|
||||
<Property name="api_error">
|
||||
This means that we made an error, which is highly speculative and unlikely.
|
||||
</Property>
|
||||
<Property name="invalid_request">
|
||||
This means that you made an error, which is much more likely.
|
||||
</Property>
|
||||
</Properties>
|
||||
|
||||
</Col>
|
||||
<Col>
|
||||
|
||||
```bash {{ title: "Error response" }}
|
||||
{
|
||||
"type": "api_error",
|
||||
"message": "No way this is happening!?",
|
||||
"documentation_url": "https://protocol.chat/docs/errors/api_error"
|
||||
}
|
||||
```
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user