diff --git a/apps/builder/components/shared/hooks/useToast.tsx b/apps/builder/components/shared/hooks/useToast.tsx
index c260095a6..e28c69239 100644
--- a/apps/builder/components/shared/hooks/useToast.tsx
+++ b/apps/builder/components/shared/hooks/useToast.tsx
@@ -1,22 +1,21 @@
import { useToast as useChakraToast, UseToastOptions } from '@chakra-ui/react'
+import { useCallback } from 'react'
export const useToast = () => {
const toast = useChakraToast()
- const showToast = ({
- title,
- description,
- status = 'error',
- ...props
- }: UseToastOptions) => {
- toast({
- position: 'bottom-right',
- description,
- title,
- status,
- ...props,
- })
- }
+ const showToast = useCallback(
+ ({ title, description, status = 'error', ...props }: UseToastOptions) => {
+ toast({
+ position: 'bottom-right',
+ description,
+ title,
+ status,
+ ...props,
+ })
+ },
+ [toast]
+ )
return { showToast }
}
diff --git a/apps/builder/components/templates/TemplatesModal.tsx b/apps/builder/components/templates/TemplatesModal.tsx
index 3beba14a5..3d52fe383 100644
--- a/apps/builder/components/templates/TemplatesModal.tsx
+++ b/apps/builder/components/templates/TemplatesModal.tsx
@@ -15,7 +15,7 @@ import { ExternalLinkIcon } from 'assets/icons'
import { TypebotViewer } from 'bot-engine'
import { useToast } from 'components/shared/hooks/useToast'
import { Typebot } from 'models'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
import { parseTypebotToPublicTypebot } from 'services/publicTypebot'
import { getViewerUrl, sendRequest } from 'utils'
import { TemplateProps, templates } from './data'
@@ -35,18 +35,22 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
const { showToast } = useToast()
+ const fetchTemplate = useCallback(
+ async (template: TemplateProps) => {
+ setSelectedTemplate(template)
+ const { data, error } = await sendRequest(
+ `/templates/${template.fileName}`
+ )
+ if (error)
+ return showToast({ title: error.name, description: error.message })
+ setTypebot(data as Typebot)
+ },
+ [showToast]
+ )
+
useEffect(() => {
fetchTemplate(templates[0])
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
-
- const fetchTemplate = async (template: TemplateProps) => {
- setSelectedTemplate(template)
- const { data, error } = await sendRequest(`/templates/${template.fileName}`)
- if (error)
- return showToast({ title: error.name, description: error.message })
- setTypebot(data as Typebot)
- }
+ }, [fetchTemplate])
const onUseThisTemplateClick = () => {
if (!typebot) return
diff --git a/apps/builder/components/templates/data.ts b/apps/builder/components/templates/data.ts
index 648474285..1a2da478a 100644
--- a/apps/builder/components/templates/data.ts
+++ b/apps/builder/components/templates/data.ts
@@ -18,8 +18,7 @@ export const templates: TemplateProps[] = [
{
name: 'FAQ',
emoji: '๐ฌ',
- fileName: 'customer-support.json',
- isComingSoon: true,
+ fileName: 'faq.json',
},
{
name: 'Conversational Resume',
diff --git a/apps/builder/public/templates/faq.json b/apps/builder/public/templates/faq.json
new file mode 100644
index 000000000..66b9ad673
--- /dev/null
+++ b/apps/builder/public/templates/faq.json
@@ -0,0 +1,574 @@
+{
+ "id": "cl96ns7zc000dky099ku4bmav",
+ "createdAt": "2022-10-13T06:07:11.976Z",
+ "updatedAt": "2022-10-13T06:27:31.951Z",
+ "icon": "๐ฌ",
+ "name": "FAQ",
+ "publishedTypebotId": null,
+ "folderId": null,
+ "groups": [
+ {
+ "id": "cl96ns7za000309kyewk56s22",
+ "title": "Start",
+ "blocks": [
+ {
+ "id": "cl96ns7za000409kydoui7mpu",
+ "type": "start",
+ "label": "Start",
+ "groupId": "cl96ns7za000309kyewk56s22",
+ "outgoingEdgeId": "cl96nv0ij00093b6id4t83dvu"
+ }
+ ],
+ "graphCoordinates": { "x": 0, "y": 0 }
+ },
+ {
+ "id": "cl96ns9qr00043b6ii07bo25o",
+ "graphCoordinates": { "x": 392, "y": 181 },
+ "title": "Menu",
+ "blocks": [
+ {
+ "id": "cl96ns9qr00053b6igebgtl5q",
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "type": "text",
+ "content": {
+ "html": "
If you have a question about our product, you're in the right place ๐
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "If you have a question about our product, you're in the right place ๐"
+ }
+ ]
+ }
+ ],
+ "plainText": "If you have a question about our product, you're in the right place ๐"
+ }
+ },
+ {
+ "id": "cl96nv877000b3b6i7p69ss2o",
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "type": "choice input",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "items": [
+ {
+ "id": "cl96nv877000c3b6idyepv694",
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "type": 0,
+ "content": "What's Analyzr?",
+ "outgoingEdgeId": "cl96o2u6h000t3b6izmh4pguj"
+ },
+ {
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "type": 0,
+ "id": "cl96nvcwi000d3b6ipyfzcyaw",
+ "content": "Can I use your tool for free?",
+ "outgoingEdgeId": "cl96o6hxh00173b6ix83nn581"
+ },
+ {
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "type": 0,
+ "id": "cl96obwgy001k3b6ir1a8qk5w",
+ "content": "Tell me about the company",
+ "outgoingEdgeId": "cl96ofn4s001q3b6i482xx6jp"
+ },
+ {
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "type": 0,
+ "id": "cl96nvstv000e3b6itm8cj1s5",
+ "content": "I have another question",
+ "outgoingEdgeId": "cl96ogaa0001x3b6izae2alxq"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "cl96nt9ob00063b6ii2pktlxq",
+ "graphCoordinates": { "x": 26.51592874499341, "y": 202.71976248331134 },
+ "title": "Welcom",
+ "blocks": [
+ {
+ "id": "cl96nt9ob00073b6ionlvakha",
+ "groupId": "cl96nt9ob00063b6ii2pktlxq",
+ "type": "text",
+ "content": {
+ "html": "Hey there ๐
",
+ "richText": [
+ { "type": "p", "children": [{ "text": "Hey there ๐" }] }
+ ],
+ "plainText": "Hey there ๐"
+ }
+ },
+ {
+ "id": "cl96ntraa00083b6ij922v2qh",
+ "groupId": "cl96nt9ob00063b6ii2pktlxq",
+ "type": "text",
+ "content": {
+ "html": "I'm John, head of the customer success Team at Analyzr
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "I'm John, head of the customer success Team at Analyzr"
+ }
+ ]
+ }
+ ],
+ "plainText": "I'm John, head of the customer success Team at Analyzr"
+ },
+ "outgoingEdgeId": "cl96nv51s000a3b6i3wmlcmdt"
+ }
+ ]
+ },
+ {
+ "id": "cl96o2cgi000r3b6iljr1iwdl",
+ "graphCoordinates": { "x": 787, "y": -534 },
+ "title": "What's Analyzr",
+ "blocks": [
+ {
+ "id": "cl96o2cgi000s3b6ikdv6iogz",
+ "groupId": "cl96o2cgi000r3b6iljr1iwdl",
+ "type": "text",
+ "content": {
+ "html": "Analyzr is a simple and privacy-friendly analytics tool for your website
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "Analyzr is a simple and privacy-friendly analytics tool for your website"
+ }
+ ]
+ }
+ ],
+ "plainText": "Analyzr is a simple and privacy-friendly analytics tool for your website"
+ }
+ },
+ {
+ "id": "cl96o3260000u3b6i9czqm52g",
+ "groupId": "cl96o2cgi000r3b6iljr1iwdl",
+ "type": "text",
+ "content": {
+ "html": "It is:
โ
Lightweight
โ
Open-source
โ
Fully compliant with GDPR
",
+ "richText": [
+ { "type": "p", "children": [{ "text": "It is:" }] },
+ { "type": "p", "children": [{ "text": "โ
Lightweight" }] },
+ { "type": "p", "children": [{ "text": "โ
Open-source" }] },
+ {
+ "type": "p",
+ "children": [{ "text": "โ
Fully compliant with GDPR" }]
+ }
+ ],
+ "plainText": "It is:โ
Lightweightโ
Open-sourceโ
Fully compliant with GDPR"
+ }
+ },
+ {
+ "id": "cl96o55z3000x3b6ikq14g2tu",
+ "groupId": "cl96o2cgi000r3b6iljr1iwdl",
+ "type": "choice input",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "items": [
+ {
+ "id": "cl96o55z3000y3b6idpn54byw",
+ "blockId": "cl96o55z3000x3b6ikq14g2tu",
+ "type": 0,
+ "content": "Sounds good!",
+ "outgoingEdgeId": "cl96o5k4n00103b6irh2dfp2r"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "cl96o6a2700123b6ie4efb6bb",
+ "graphCoordinates": { "x": 803.5720553542924, "y": 7.420010744791735 },
+ "title": "Use for free",
+ "blocks": [
+ {
+ "id": "cl96o6a2700133b6ii5n027h2",
+ "groupId": "cl96o6a2700123b6ie4efb6bb",
+ "type": "text",
+ "content": {
+ "html": "You can!
",
+ "richText": [{ "type": "p", "children": [{ "text": "You can!" }] }],
+ "plainText": "You can!"
+ }
+ },
+ {
+ "id": "cl96o6a2700143b6ija9jqhky",
+ "groupId": "cl96o6a2700123b6ie4efb6bb",
+ "type": "text",
+ "content": {
+ "html": "Analyzr has a generous free plan that allows you to store 1,000,000ย events/mo ๐
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "Analyzr has a generous free plan that allows you to store 1,000,000ย events/mo ๐"
+ }
+ ]
+ }
+ ],
+ "plainText": "Analyzr has a generous free plan that allows you to store 1,000,000ย events/mo ๐"
+ }
+ },
+ {
+ "id": "cl96o6a2700153b6il1wj2aev",
+ "groupId": "cl96o6a2700123b6ie4efb6bb",
+ "type": "choice input",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "items": [
+ {
+ "id": "cl96o6a2700163b6i818ywnqv",
+ "blockId": "cl96o6a2700153b6il1wj2aev",
+ "type": 0,
+ "content": "Awesome!",
+ "outgoingEdgeId": "cl96oa6kn001g3b6iaormwu2j"
+ },
+ {
+ "blockId": "cl96o6a2700153b6il1wj2aev",
+ "type": 0,
+ "id": "cl96o83lo00183b6igen42ivq",
+ "content": "What's an event?",
+ "outgoingEdgeId": "cl96oa83f001h3b6i81wodnjx"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "cl96o8eym001a3b6i3lxh7kw0",
+ "graphCoordinates": { "x": 1179.4933795363515, "y": 7.7432256889634 },
+ "title": "User event",
+ "blocks": [
+ {
+ "id": "cl96o8eyn001b3b6icmbgg7lw",
+ "groupId": "cl96o8eym001a3b6i3lxh7kw0",
+ "type": "text",
+ "content": {
+ "html": "An event is a user event on your website.
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ { "text": "An event is a user event on your website." }
+ ]
+ }
+ ],
+ "plainText": "An event is a user event on your website."
+ }
+ },
+ {
+ "id": "cl96o990s001c3b6ie2jjefhf",
+ "groupId": "cl96o8eym001a3b6i3lxh7kw0",
+ "type": "text",
+ "content": {
+ "html": "It can be "User visited this URL" or "User clicked on this button"
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "It can be \"User visited this URL\" or \"User clicked on this button\""
+ }
+ ]
+ }
+ ],
+ "plainText": "It can be \"User visited this URL\" or \"User clicked on this button\""
+ }
+ },
+ {
+ "id": "cl96o9xba001d3b6i9004l33e",
+ "groupId": "cl96o8eym001a3b6i3lxh7kw0",
+ "type": "choice input",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "items": [
+ {
+ "id": "cl96o9xbd001e3b6i6ag5ooo7",
+ "blockId": "cl96o9xba001d3b6i9004l33e",
+ "type": 0,
+ "content": "Ok, got it!"
+ }
+ ]
+ },
+ {
+ "id": "cl96oaa8n001j3b6ieqe5r775",
+ "groupId": "cl96o8eym001a3b6i3lxh7kw0",
+ "type": "Typebot link",
+ "options": {
+ "typebotId": "current",
+ "groupId": "cl96ns9qr00043b6ii07bo25o"
+ }
+ }
+ ]
+ },
+ {
+ "id": "cl96oc274001m3b6ig3beli9v",
+ "graphCoordinates": { "x": 802.8616130197884, "y": 477.1611550243932 },
+ "title": "Company",
+ "blocks": [
+ {
+ "id": "cl96ods3i001o3b6iiyboljuf",
+ "groupId": "cl96oc274001m3b6ig3beli9v",
+ "type": "text",
+ "content": {
+ "html": "The company was founded in 2020 by Josh Corn
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ { "text": "The company was founded in 2020 by Josh Corn" }
+ ]
+ }
+ ],
+ "plainText": "The company was founded in 2020 by Josh Corn"
+ }
+ },
+ {
+ "id": "cl96oc277001n3b6if8wv6hzl",
+ "groupId": "cl96oc274001m3b6ig3beli9v",
+ "type": "text",
+ "content": {
+ "html": "We are now a team of 15
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [{ "text": "We are now a team of 15" }]
+ }
+ ],
+ "plainText": "We are now a team of 15"
+ }
+ },
+ {
+ "id": "cl96oenlh001p3b6iutaiw9wl",
+ "groupId": "cl96oc274001m3b6ig3beli9v",
+ "type": "text",
+ "content": {
+ "html": "Our core values are:
๐ Transparency
โก Ship fast
๐ Awesome customer support
",
+ "richText": [
+ { "type": "p", "children": [{ "text": "Our core values are:" }] },
+ { "type": "p", "children": [{ "text": "" }] },
+ { "type": "p", "children": [{ "text": "๐ Transparency" }] },
+ { "type": "p", "children": [{ "text": "โก Ship fast" }] },
+ {
+ "type": "p",
+ "children": [{ "text": "๐ Awesome customer support" }]
+ }
+ ],
+ "plainText": "Our core values are:๐ Transparencyโก Ship fast๐ Awesome customer support"
+ }
+ },
+ {
+ "id": "cl96oftnv001r3b6ixen8g0bv",
+ "groupId": "cl96oc274001m3b6ig3beli9v",
+ "type": "choice input",
+ "options": { "buttonLabel": "Send", "isMultipleChoice": false },
+ "items": [
+ {
+ "id": "cl96oftnv001s3b6i7kjyq7me",
+ "blockId": "cl96oftnv001r3b6ixen8g0bv",
+ "type": 0,
+ "content": "Cool!",
+ "outgoingEdgeId": "cl96ofyy3001u3b6iro2dkp0w"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "id": "cl96og2yr001v3b6ivhzb1x34",
+ "graphCoordinates": { "x": 798.1737080264639, "y": 1045.5696354649942 },
+ "title": "Question",
+ "blocks": [
+ {
+ "id": "cl96og2yu001w3b6ijqgstubu",
+ "groupId": "cl96og2yr001v3b6ivhzb1x34",
+ "type": "text",
+ "content": {
+ "html": "Sure, no problem!
",
+ "richText": [
+ { "type": "p", "children": [{ "text": "Sure, no problem!" }] }
+ ],
+ "plainText": "Sure, no problem!"
+ }
+ },
+ {
+ "id": "cl96ogmjx001y3b6iwfosloet",
+ "groupId": "cl96og2yr001v3b6ivhzb1x34",
+ "type": "text input",
+ "options": {
+ "isLong": true,
+ "labels": {
+ "button": "Send",
+ "placeholder": "Type your question..."
+ }
+ },
+ "outgoingEdgeId": "cl96ohn9900213b6ibex8g6my"
+ }
+ ]
+ },
+ {
+ "id": "cl96oh3mn001z3b6i2b0no81w",
+ "graphCoordinates": { "x": 1174.378083740756, "y": 1049.0855642099898 },
+ "title": "Bye",
+ "blocks": [
+ {
+ "id": "cl96oh3mn00203b6iahw2x1ns",
+ "groupId": "cl96oh3mn001z3b6i2b0no81w",
+ "type": "text",
+ "content": {
+ "html": "Alright, we'll reach out to you very soon. Thank you so much ๐
",
+ "richText": [
+ {
+ "type": "p",
+ "children": [
+ {
+ "text": "Alright, we'll reach out to you very soon. Thank you so much ๐"
+ }
+ ]
+ }
+ ],
+ "plainText": "Alright, we'll reach out to you very soon. Thank you so much ๐"
+ }
+ }
+ ]
+ }
+ ],
+ "variables": [],
+ "edges": [
+ {
+ "from": {
+ "groupId": "cl96ns7za000309kyewk56s22",
+ "blockId": "cl96ns7za000409kydoui7mpu"
+ },
+ "to": { "groupId": "cl96nt9ob00063b6ii2pktlxq" },
+ "id": "cl96nv0ij00093b6id4t83dvu"
+ },
+ {
+ "from": {
+ "groupId": "cl96nt9ob00063b6ii2pktlxq",
+ "blockId": "cl96ntraa00083b6ij922v2qh"
+ },
+ "to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
+ "id": "cl96nv51s000a3b6i3wmlcmdt"
+ },
+ {
+ "from": {
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "itemId": "cl96nv877000c3b6idyepv694"
+ },
+ "to": { "groupId": "cl96o2cgi000r3b6iljr1iwdl" },
+ "id": "cl96o2u6h000t3b6izmh4pguj"
+ },
+ {
+ "from": {
+ "groupId": "cl96o2cgi000r3b6iljr1iwdl",
+ "blockId": "cl96o55z3000x3b6ikq14g2tu",
+ "itemId": "cl96o55z3000y3b6idpn54byw"
+ },
+ "to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
+ "id": "cl96o5k4n00103b6irh2dfp2r"
+ },
+ {
+ "from": {
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "itemId": "cl96nvcwi000d3b6ipyfzcyaw"
+ },
+ "to": { "groupId": "cl96o6a2700123b6ie4efb6bb" },
+ "id": "cl96o6hxh00173b6ix83nn581"
+ },
+ {
+ "from": {
+ "groupId": "cl96o6a2700123b6ie4efb6bb",
+ "blockId": "cl96o6a2700153b6il1wj2aev",
+ "itemId": "cl96o6a2700163b6i818ywnqv"
+ },
+ "to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
+ "id": "cl96oa6kn001g3b6iaormwu2j"
+ },
+ {
+ "from": {
+ "groupId": "cl96o6a2700123b6ie4efb6bb",
+ "blockId": "cl96o6a2700153b6il1wj2aev",
+ "itemId": "cl96o83lo00183b6igen42ivq"
+ },
+ "to": { "groupId": "cl96o8eym001a3b6i3lxh7kw0" },
+ "id": "cl96oa83f001h3b6i81wodnjx"
+ },
+ {
+ "from": {
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "itemId": "cl96obwgy001k3b6ir1a8qk5w"
+ },
+ "to": { "groupId": "cl96oc274001m3b6ig3beli9v" },
+ "id": "cl96ofn4s001q3b6i482xx6jp"
+ },
+ {
+ "from": {
+ "groupId": "cl96oc274001m3b6ig3beli9v",
+ "blockId": "cl96oftnv001r3b6ixen8g0bv",
+ "itemId": "cl96oftnv001s3b6i7kjyq7me"
+ },
+ "to": { "groupId": "cl96ns9qr00043b6ii07bo25o" },
+ "id": "cl96ofyy3001u3b6iro2dkp0w"
+ },
+ {
+ "from": {
+ "groupId": "cl96ns9qr00043b6ii07bo25o",
+ "blockId": "cl96nv877000b3b6i7p69ss2o",
+ "itemId": "cl96nvstv000e3b6itm8cj1s5"
+ },
+ "to": { "groupId": "cl96og2yr001v3b6ivhzb1x34" },
+ "id": "cl96ogaa0001x3b6izae2alxq"
+ },
+ {
+ "from": {
+ "groupId": "cl96og2yr001v3b6ivhzb1x34",
+ "blockId": "cl96ogmjx001y3b6iwfosloet"
+ },
+ "to": { "groupId": "cl96oh3mn001z3b6i2b0no81w" },
+ "id": "cl96ohn9900213b6ibex8g6my"
+ }
+ ],
+ "theme": {
+ "chat": {
+ "inputs": {
+ "color": "#303235",
+ "backgroundColor": "#FFFFFF",
+ "placeholderColor": "#9095A0"
+ },
+ "buttons": { "color": "#FFFFFF", "backgroundColor": "#0042DA" },
+ "hostAvatar": {
+ "isEnabled": true,
+ "url": "https://s3.fr-par.scw.cloud/typebot/public/typebots/cl96ns7zc000dky099ku4bmav/sigmund-a19OVaa2rzA-unsplash Small.jpeg"
+ },
+ "hostBubbles": { "color": "#303235", "backgroundColor": "#F7F8FF" },
+ "guestBubbles": { "color": "#FFFFFF", "backgroundColor": "#FF8E21" }
+ },
+ "general": { "font": "Open Sans", "background": { "type": "None" } }
+ },
+ "settings": {
+ "general": {
+ "isBrandingEnabled": false,
+ "isInputPrefillEnabled": true,
+ "isHideQueryParamsEnabled": true,
+ "isNewResultOnRefreshEnabled": false
+ },
+ "metadata": {
+ "description": "Build beautiful conversational forms and embed them directly in your applications without a line of code. Triple your response rate and collect answers that has more value compared to a traditional form."
+ },
+ "typingEmulation": { "speed": 300, "enabled": true, "maxDelay": 1.5 }
+ },
+ "publicId": null,
+ "customDomain": null,
+ "workspaceId": "cl35yesle00188gcpgqu70ia1",
+ "resultsTablePreferences": null,
+ "isArchived": false,
+ "isClosed": false
+}