mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-30 18:30:32 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

update quick manual

Browse Source
This commit is contained in:
knugget
2023-02-13 12:18:01 +01:00
parent 8ae1353114
commit 6779cac4c4
8 changed files with 132 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
.env.example Normal file
View File

@@ -0,0 +1,76 @@
########################################################################
# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
########################################################################
############
# Basics #
############
NEXTAUTH_SECRET=RANDOM_STRING
# Set this to your public-facing URL, e.g., https://example.com
NEXTAUTH_URL=http://localhost:3000
# This should always be localhost:3000 (or whatever port your app is running on)
NEXTAUTH_URL_INTERNAL=http://localhost:3000
DATABASE_URL='postgresql://postgres:postgres@localhost:5432/postgres?schema=public'
# For Docker Compose Production Setup use this Database URL:
# DATABASE_URL='postgresql://postgres:postgres@postgres:5432/formbricks?schema=public'
################
# Mail Setup #
################
# Necessary if email verification and password reset are enabled.
# See optional configurations below if you want to disable these features.
MAIL_FROM=noreply@example.com
SMTP_HOST=localhost
SMTP_PORT=1025
SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
SMTP_USER=smtpUser
SMTP_PASSWORD=smtpPassword
########################################################################
# ------------------------------ OPTIONAL -----------------------------#
########################################################################
# Uncomment the variables you would like to use and customize the values.
#####################
# Disable Features #
#####################
# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
# Signup. Disable the ability for new users to create an account.
# NEXT_PUBLIC_SIGNUP_DISABLED=1
##########
# Other #
##########
# Disable Sentry warning
SENTRY_IGNORE_API_RESOLUTION_ERROR=1
# Enable Sentry Error Tracking
NEXT_PUBLIC_SENTRY_DSN=
# Configure Github Login
NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
GITHUB_ID=
GITHUB_SECRET=
# Stripe Billing Variables
NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=

2
apps/web/src/components/forms/feedback/FeedbackResults.tsx
View File

@@ -101,7 +101,7 @@ export default function FeedbackResults() {
</Dialog>
</Transition.Root>
<div>
<section aria-labelledby="products-heading" className="pt-6 pb-24">
<section aria-labelledby="products-heading" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
<div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
<FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />

104
apps/web/src/components/forms/feedback/SetupInstructions.tsx
View File

@@ -14,70 +14,16 @@ export default function SetupInstructions({}) {
return (
<div>
<div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
<div className="max-w-8xl mx-auto grid grid-cols-5 gap-16 py-8">
<div className="col-span-3">
<div>
<div className="mb-6">
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
<p>You can install the Feedback Box with NPM and with a JavaScript embed:</p>
</div>
<div>
<h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
<ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Install Feedback Box with NPM</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/feedback-box">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your feedback will show up in the Results tab.</li>
</ol>
<h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`npm install @formbricks/feedback`}</code>
</pre>
</div>
<h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`config: {
hqUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
containerId: "test-div",
contact: {
name: "Johannes",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
},
customer: {
id: "uUid", // fill dynamically
name: "User", // fill dynamically
email: "test@cal.com", // fill dynamically
},
style: {
brandColor: "#0E1420",
headerBGColor: "#E5E7EB",
headerTitleColor: "#4B5563",
boxBGColor: "#F9FAFB",
textColor: "#374151",
buttonHoverColor: "#F3F4F6",
},
}`}</code>
</pre>
</div>
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guide</h2>
<p>You embed the Feedback Box with a JavaScript snippet:</p>
</div>
<hr className="my-10 text-slate-800" />
<div>
<h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
<h3 className="block text-xl font-semibold text-slate-800">How to</h3>
<ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
<li>Set up a button with the onClick handler below to let your users open the widget.</li>
@@ -102,17 +48,22 @@ export default function SetupInstructions({}) {
<pre>
<code className="language-html whitespace-pre-wrap">
{`<!--HTML header script -->
<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2" defer></script>
<script>
window.formbricks = {
config: {
hqUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
},
...window.formbricks,
};
</script>
window.formbricks = {
...window.formbricks,
config: {
hqUrl: "https://app.formbricks.com",
formId: "YOUR FEEDBACK BOX ID HERE", // copy from Formbricks dashboard
contact: {
name: "Matti",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
},
},
}
</script>
`}
</code>
</pre>
@@ -130,6 +81,17 @@ window.formbricks = {
</pre>
</div>
</div>
<div className="mt-3">
<h4 className="my-2 block text-lg font-semibold text-slate-800">Read full manual</h4>
<Button
variant="highlight"
target="_blank"
className="mt-2"
href="https://formbricks.com/docs/best-practices/feedback-box">
Feedback Box Docs
</Button>
</div>
</div>
</div>
</div>
@@ -148,7 +110,7 @@ window.formbricks = {
/>
<Button
variant="primary"
variant="highlight"
className="mt-2 w-full justify-center"
onClick={() => {
navigator.clipboard.writeText(formId);
@@ -164,8 +126,8 @@ window.formbricks = {
variant="secondary"
target="_blank"
className="mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/docs")}>
Docs
href="https://formbricks.com/docs/best-practices/feedback-box">
Documentation{" "}
</Button>
</div>
<div className="mt-10">
@@ -175,7 +137,7 @@ window.formbricks = {
variant="secondary"
target="_blank"
className="bg-purple mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/discord")}>
href="https://formbricks.com/discord">
Join Discord
</Button>
</div>

2
apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
View File

@@ -140,7 +140,7 @@ export default function PipelinesOverview({}) {
return <div>Error loading ressources. Maybe you don&lsquo;t have enough access rights</div>;
}
return (
<div className="mx-auto py-8">
<div className="max-w-8xl mx-auto py-8">
<header className="mb-8">
<div className="flex justify-between">
<p className="text-slate-800">

2
apps/web/src/components/forms/pmf/OverviewResults.tsx
View File

@@ -57,7 +57,7 @@ export default function OverviewResults() {
return (
<div>
<div>
<section aria-labelledby="filters" className="pt-6 pb-24">
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24 ">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />

2
apps/web/src/components/forms/pmf/PMFResults.tsx
View File

@@ -32,7 +32,7 @@ export default function PMFResults() {
return (
<div>
<div>
<section aria-labelledby="filters" className="pt-6 pb-24">
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />

64
apps/web/src/components/forms/pmf/SetupInstructions.tsx
View File

@@ -14,54 +14,13 @@ export default function SetupInstructions({}) {
return (
<div>
<div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
<div className="max-w-8xl mx-auto grid grid-cols-5 gap-16 py-8">
<div className="col-span-3">
<div>
<div className="mb-6">
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
<p>You can install the PMF Survey with NPM and with a JavaScript embed:</p>
<h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guide</h2>
<p>You add the PMF Survey with a JavaScript embed:</p>
</div>
<div>
<h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
<ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
<li>Install PMF Survey Box with NPM</li>
<li>
Set up the config file according to your needs.{" "}
<a
target="_blank"
rel="noreferrer"
className="text-brand-dark font-bold underline"
href="https://formbricks.com/docs/best-practices/pmf-survey">
Read the docs
</a>{" "}
for more info.
</li>
<li>You&apos;re done! Your submissions will show up in the Results tab.</li>
</ol>
<h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`npm install @formbricks/pmf`}</code>
</pre>
</div>
<h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
<div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
<pre>
<code className="language-html whitespace-pre-wrap">{`config: {
formbricksUrl: "${window.location.protocol}//${window.location.host}",
formId: "${formId}",
containerId: "formbricks",
customer: {
id: "uUid", // fill dynamically e.g. from session object
name: "User name", // fill dynamically
email: "example@fmail.com", // fill dynamically
},
}`}</code>
</pre>
</div>
</div>
<hr className="my-10 text-slate-800" />
<div>
<h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
@@ -118,6 +77,17 @@ window.formbricks = {
</pre>
</div>
</div>
<div className="mt-3">
<h4 className="my-2 block text-lg font-semibold text-slate-800">Read full manual</h4>
<Button
variant="highlight"
target="_blank"
className="mt-2"
href="https://formbricks.com/docs/best-practices/pmf-survey">
PMF Survey Docs
</Button>
</div>
</div>
</div>
</div>
@@ -152,8 +122,8 @@ window.formbricks = {
variant="secondary"
target="_blank"
className="mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/docs")}>
Docs
href="https://formbricks.com/docs/best-practices/pmf-survey">
Documentation
</Button>
</div>
<div className="mt-10">
@@ -163,7 +133,7 @@ window.formbricks = {
variant="secondary"
target="_blank"
className="bg-purple mt-2 w-full justify-center"
onClick={() => router.push("https://formbricks.com/discord")}>
href="https://formbricks.com/discord">
Join Discord
</Button>
</div>

4
apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
View File

@@ -54,7 +54,7 @@ export default function SegmentResults() {
return (
<div>
<div>
<section aria-labelledby="filters" className="pt-6 pb-24">
<section aria-labelledby="filters" className="max-w-8xl mx-auto py-8">
<div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
<div>
{/* Segments */}
@@ -95,7 +95,7 @@ export default function SegmentResults() {
{/* Double down on what they love*/}
<div className="max-w-3xl lg:col-span-3">
<div className=" lg:col-span-3">
<div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
<div className="flex flex-col items-center justify-center rounded-lg bg-white p-2">
<h3 className="text-sm font-medium text-slate-800">Overall</h3>