mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-05-08 06:41:45 -05:00
Code Issues Packages Projects Releases 100 Wiki Activity

Merge branch 'main' of github.com:formbricks/formbricks

Browse Source
This commit is contained in:
Matthias Nannt
2023-02-13 14:01:48 +01:00
parent 1884655c85 14a8ea9b2c
commit 35da57d06d
8 changed files with 132 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/forms/feedback/FeedbackResults.tsx
+1 -1
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} />
apps/web/src/components/forms/feedback/SetupInstructions.tsx
+33 -71
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>
apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
+1 -1
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">
apps/web/src/components/forms/pmf/OverviewResults.tsx
+1 -1
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} />
apps/web/src/components/forms/pmf/PMFResults.tsx
+1 -1
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} />
apps/web/src/components/forms/pmf/SetupInstructions.tsx
+17 -47
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>
apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
+2 -2
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>