diff --git a/apps/docs/app/global/question-type/address/images/address.webp b/apps/docs/app/global/question-type/address/images/address.webp new file mode 100644 index 0000000000..7f9279616f Binary files /dev/null and b/apps/docs/app/global/question-type/address/images/address.webp differ diff --git a/apps/docs/app/global/question-type/address/page.mdx b/apps/docs/app/global/question-type/address/page.mdx new file mode 100644 index 0000000000..e065575669 --- /dev/null +++ b/apps/docs/app/global/question-type/address/page.mdx @@ -0,0 +1,36 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Address from "./images/address.webp"; + +#### Question Type + +# Address + +The Address question type allows respondents to input their address details, including multiple fields such as address lines, city, state, and country. You can configure the question by adding a title, an optional description, and toggling specific fields to be required. + + + +## Elements + + + +### Question +Provide a question to describe the address information you are requesting. + +### Description +Optionally, add a description to guide the user. + +### Toggle Fields +You can choose to show and require any or all of the following fields in the form: + - Address Line 1 + - Address Line 2 + - City + - State + - Zip Code + - Country + diff --git a/apps/docs/app/global/question-type/consent/images/consent.webp b/apps/docs/app/global/question-type/consent/images/consent.webp new file mode 100644 index 0000000000..60291a402c Binary files /dev/null and b/apps/docs/app/global/question-type/consent/images/consent.webp differ diff --git a/apps/docs/app/global/question-type/consent/page.mdx b/apps/docs/app/global/question-type/consent/page.mdx new file mode 100644 index 0000000000..224b5fed05 --- /dev/null +++ b/apps/docs/app/global/question-type/consent/page.mdx @@ -0,0 +1,28 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Consent from "./images/consent.webp"; + +#### Question Type + +# Consent + +The Consent card is used to obtain user agreement regarding a product, service, or policy. It features a bold statement or question as the title, followed by a brief description. At the end of the card, users can confirm their consent by checking a checkbox to indicate their agreement. + + + +## Elements + + +### Title +A bold statement or question asking for user consent, displayed prominently at the top of the card. + +### Description +A short explanation or additional context for the consent request, displayed below the title. The text can be formatted, and hyperlinks are allowed within the description. + +### Checkbox +At the bottom of the card, users can confirm their agreement by checking the box, indicating their consent to the question or statement above. The label for the checkbox is also editable. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/contact/images/contact.webp b/apps/docs/app/global/question-type/contact/images/contact.webp new file mode 100644 index 0000000000..ac2ade0722 Binary files /dev/null and b/apps/docs/app/global/question-type/contact/images/contact.webp differ diff --git a/apps/docs/app/global/question-type/contact/page.mdx b/apps/docs/app/global/question-type/contact/page.mdx new file mode 100644 index 0000000000..df4c555a59 --- /dev/null +++ b/apps/docs/app/global/question-type/contact/page.mdx @@ -0,0 +1,36 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Contact from "./images/contact.webp"; + +#### Question Type + +# Contact Info + +The Contact Info question type allows respondents to provide their basic contact information such as name, email, and phone number. You can customize the form with a title, an optional description, and control which fields to display and require. + + + +## Elements + + +### Title + +Specify a title to describe the information you're collecting. + +### Description + +Optionally, add a description to give additional context. + +### Toggle Fields + +You can choose to show and require any or all of the following fields: + - First Name + - Last Name + - Email + - Phone Number + - Company diff --git a/apps/docs/app/global/question-type/date/images/date.webp b/apps/docs/app/global/question-type/date/images/date.webp new file mode 100644 index 0000000000..6fa0c564a4 Binary files /dev/null and b/apps/docs/app/global/question-type/date/images/date.webp differ diff --git a/apps/docs/app/global/question-type/date/page.mdx b/apps/docs/app/global/question-type/date/page.mdx new file mode 100644 index 0000000000..c3592ca48e --- /dev/null +++ b/apps/docs/app/global/question-type/date/page.mdx @@ -0,0 +1,32 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Date from "./images/date.webp"; + +#### Question Type + +# Date + +The Date question type allows respondents to provide a date, such as when they are available or when an event is scheduled. It features a title to guide the respondent on what date to enter, and an optional description to provide further details or context. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what date you are asking for. + +### Description +Provide an optional description with further instructions. + +### Date Format +Choose from multiple date formats for the input: + - MM-DD-YYYY + - DD-MM-YYYY + - YYYY-MM-DD + diff --git a/apps/docs/app/global/question-type/file-upload/images/file-upload.webp b/apps/docs/app/global/question-type/file-upload/images/file-upload.webp new file mode 100644 index 0000000000..dd85a6d161 Binary files /dev/null and b/apps/docs/app/global/question-type/file-upload/images/file-upload.webp differ diff --git a/apps/docs/app/global/question-type/file-upload/page.mdx b/apps/docs/app/global/question-type/file-upload/page.mdx new file mode 100644 index 0000000000..0b2e3e6d6a --- /dev/null +++ b/apps/docs/app/global/question-type/file-upload/page.mdx @@ -0,0 +1,34 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import FileUpload from "./images/file-upload.webp"; + +#### Questions Type + +# File Upload + +The File Upload question type allows respondents to upload files related to your survey, such as production documents or requirement specifications. It features a title to guide the user on what to upload and an optional description to provide additional context. + + + +## Elements + + +### Title +Add a clear title that informs the respondent about the purpose of the file upload. + +### Description +Provide an optional description to give respondents more details or instructions about what files they need to upload. + +### Allow Multiple Files +Enable this option to allow respondents to upload multiple files at once. + +### Max File Size +You can set a maximum file size limit, and an input box will appear to specify the size in MB. + +### File Type Restrictions +You can restrict the allowed file types. An input box will appear where you can specify the file formats, such as `.pdf`, `.jpg`, `.docx`, etc. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/free-text/images/free-text.webp b/apps/docs/app/global/question-type/free-text/images/free-text.webp new file mode 100644 index 0000000000..960d9b4cc1 Binary files /dev/null and b/apps/docs/app/global/question-type/free-text/images/free-text.webp differ diff --git a/apps/docs/app/global/question-type/free-text/page.mdx b/apps/docs/app/global/question-type/free-text/page.mdx new file mode 100644 index 0000000000..2b0b4aaf89 --- /dev/null +++ b/apps/docs/app/global/question-type/free-text/page.mdx @@ -0,0 +1,43 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import FreeText from "./images/free-text.webp"; + +export const metadata = { + title: "Free Text", + description: "Free text questions allow respondents to enter a custom answer.", +}; + +#### Question Type + +# Free Text + +Free text questions allow respondents to enter a custom answer. Displays a title and an input field for the respondent to type in. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Placeholder +Specify a placeholder text to display in the input field. + +### Input Type + +Choose the type of input field to display. Options include: + +- **Text**: A text area input. This can be converted to a single line input field if needed, by toggling the _"Long answer"_ switch at the bottom of the question segment. +- **Email**: A single-line text input that validates the input as an email address. +- **URL**: A single-line text input that validates the input as a URL. +- **Number**: A single-line text input that validates the input as a number and shows "increase" and "decrease" buttons. +- **Phone**: A single-line text input that validates the input as a phone number. diff --git a/apps/docs/app/global/question-type/matrix/images/matrix.webp b/apps/docs/app/global/question-type/matrix/images/matrix.webp new file mode 100644 index 0000000000..8c3d1c436f Binary files /dev/null and b/apps/docs/app/global/question-type/matrix/images/matrix.webp differ diff --git a/apps/docs/app/global/question-type/matrix/page.mdx b/apps/docs/app/global/question-type/matrix/page.mdx new file mode 100644 index 0000000000..c8f307facc --- /dev/null +++ b/apps/docs/app/global/question-type/matrix/page.mdx @@ -0,0 +1,36 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Matrix from "./images/matrix.webp"; + +#### Question Type + +# Matrix + +Matrix questions allow respondents to select a value for each option presented in rows. The values range from 0 to a user-defined maximum (e.g., 0 to X). The selection is made using radio buttons, and users can choose any value within the defined range, including 0. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Rows +Define the options shown on the left side of the matrix. These represent the items for which users will select a value. + +### Columns +Represent the range of values from 0 to X (right side of the screen). Users can choose any value, including 0, using radio buttons. + +### Select ordering + +- Keep current order: This will keep the order of options the same for all respondents. +- Randomize all: This will randomize the options for each respondent. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/multi-select/images/multi-select.webp b/apps/docs/app/global/question-type/multi-select/images/multi-select.webp new file mode 100644 index 0000000000..8c169b6f2e Binary files /dev/null and b/apps/docs/app/global/question-type/multi-select/images/multi-select.webp differ diff --git a/apps/docs/app/global/question-type/multi-select/page.mdx b/apps/docs/app/global/question-type/multi-select/page.mdx new file mode 100644 index 0000000000..41a20c2763 --- /dev/null +++ b/apps/docs/app/global/question-type/multi-select/page.mdx @@ -0,0 +1,36 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import MultiSelect from "./images/multi-select.webp"; + +export const metadata = { + title: "Multi Select", + description: "Multi select questions allow respondents to select several answers from a list", +}; + +#### Question Type + +# Multi Select + +Multi select questions allow respondents to select several answers from a list. Displays a title and a list of checkboxes for the respondent to choose from. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Options +Define the options shown in the list. These represent the items for which users will select. + +Other than the fact that respondents can select multiple options, multi select questions are similar to [single select](/global/question-types/single-select) questions. + diff --git a/apps/docs/app/global/question-type/net-promoter-score/images/net-promoter-score.webp b/apps/docs/app/global/question-type/net-promoter-score/images/net-promoter-score.webp new file mode 100644 index 0000000000..1b30bcc4d4 Binary files /dev/null and b/apps/docs/app/global/question-type/net-promoter-score/images/net-promoter-score.webp differ diff --git a/apps/docs/app/global/question-type/net-promoter-score/page.mdx b/apps/docs/app/global/question-type/net-promoter-score/page.mdx new file mode 100644 index 0000000000..20262502c9 --- /dev/null +++ b/apps/docs/app/global/question-type/net-promoter-score/page.mdx @@ -0,0 +1,31 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import NetPromoterScore from "./images/net-promoter-score.webp"; + +#### Question Type + +# Net Promoter Score + +Net Promoter Score questions allow respondents to rate a question on a scale from 0 to 10. Displays a title and a list of radio buttons for the respondent to choose from. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Labels +Add labels for the lower and upper bounds of the score. The default is "Not at all likely" and "Extremely likely". + +### Add color coding +Add color coding to the score. This will show a color bar above the score. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/picture-selection/images/picture-selection.webp b/apps/docs/app/global/question-type/picture-selection/images/picture-selection.webp new file mode 100644 index 0000000000..5c780e5530 Binary files /dev/null and b/apps/docs/app/global/question-type/picture-selection/images/picture-selection.webp differ diff --git a/apps/docs/app/global/question-type/picture-selection/page.mdx b/apps/docs/app/global/question-type/picture-selection/page.mdx new file mode 100644 index 0000000000..9b5f1087ad --- /dev/null +++ b/apps/docs/app/global/question-type/picture-selection/page.mdx @@ -0,0 +1,36 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import PictureSelection from "./images/picture-selection.webp"; + +export const metadata = { + title: "Picture Selection", + description: "Picture selection questions allow respondents to select one or more images from a list", +}; + +#### Question Type + +# Picture Selection + +Picture selection questions allow respondents to select one or more images from a list. Displays a title and a list of images for the respondent to choose from. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Images +Images can be uploaded via click or drag and drop. At least two images are required. + +### Allow Multi Select +This option allows user to select more than one image. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/ranking/images/ranking.webp b/apps/docs/app/global/question-type/ranking/images/ranking.webp new file mode 100644 index 0000000000..b057d34f34 Binary files /dev/null and b/apps/docs/app/global/question-type/ranking/images/ranking.webp differ diff --git a/apps/docs/app/global/question-type/ranking/page.mdx b/apps/docs/app/global/question-type/ranking/page.mdx new file mode 100644 index 0000000000..9ad52617d4 --- /dev/null +++ b/apps/docs/app/global/question-type/ranking/page.mdx @@ -0,0 +1,32 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Ranking from "./images/ranking.webp"; + +#### Question Type + +# Ranking + +Ranking questions let respondents select options in order from 1 to the total number of options. As they make their choices, the list is automatically rearranged in numerical order. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Options +You need to add at least two options so that users can rearrange them in numerical order based on their selection. + +### Select ordering +- Keep current order: This will keep the order of options the same for all respondents. +- Randomize all: This will randomize the options for each respondent. diff --git a/apps/docs/app/global/question-type/rating/images/rating.webp b/apps/docs/app/global/question-type/rating/images/rating.webp new file mode 100644 index 0000000000..9b1000ba1e Binary files /dev/null and b/apps/docs/app/global/question-type/rating/images/rating.webp differ diff --git a/apps/docs/app/global/question-type/rating/page.mdx b/apps/docs/app/global/question-type/rating/page.mdx new file mode 100644 index 0000000000..27b7d8b263 --- /dev/null +++ b/apps/docs/app/global/question-type/rating/page.mdx @@ -0,0 +1,39 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import Rating from "./images/rating.webp"; + +export const metadata = { + title: "Rating", + description: "Rating questions allow respondents to rate questions on a scale", +}; + +#### Question Type + +# Rating + +Rating questions allow respondents to rate questions on a scale. Displays a title and a rating scale consisting of a number of images and labels for the lower and upper ends of the scale. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Scale +Select the icon to be used for the rating scale. The options include: stars, numbers or smileys. The default is stars. + +### Range +Select the range of the rating scale. the options include: 3, 4, 5, 7 or 10. The default is 5. + +### Labels +Add labels for the lower and upper bounds of the rating scale. The default is "Not good" and "Very good". \ No newline at end of file diff --git a/apps/docs/app/global/question-type/schedule/images/schedule-call.webp b/apps/docs/app/global/question-type/schedule/images/schedule-call.webp new file mode 100644 index 0000000000..55b291282c Binary files /dev/null and b/apps/docs/app/global/question-type/schedule/images/schedule-call.webp differ diff --git a/apps/docs/app/global/question-type/schedule/page.mdx b/apps/docs/app/global/question-type/schedule/page.mdx new file mode 100644 index 0000000000..329c75defa --- /dev/null +++ b/apps/docs/app/global/question-type/schedule/page.mdx @@ -0,0 +1,31 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import ScheduleCall from "./images/schedule-call.webp"; + +#### Question Type + +# Schedule A Meeting + +The Schedule A Meeting question type allows respondents to book a meeting by selecting a date and time. It includes a title to guide the respondent, along with an optional description to provide additional context for the meeting setup. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Cal.com Username/Event +Add an input box where users can enter their [`cal.com`](https://cal.com/) username and event URL (e.g., `username/event`). + +### Custom Hostname (Optional) +Enable an input box for adding a custom hostname, which is necessary if using a self-hosted instance of [`cal.com`](https://cal.com/docs/self-hosting/installation). \ No newline at end of file diff --git a/apps/docs/app/global/question-type/single-select/images/single-select.webp b/apps/docs/app/global/question-type/single-select/images/single-select.webp new file mode 100644 index 0000000000..8949f4ab5a Binary files /dev/null and b/apps/docs/app/global/question-type/single-select/images/single-select.webp differ diff --git a/apps/docs/app/global/question-type/single-select/page.mdx b/apps/docs/app/global/question-type/single-select/page.mdx new file mode 100644 index 0000000000..2d501145d2 --- /dev/null +++ b/apps/docs/app/global/question-type/single-select/page.mdx @@ -0,0 +1,44 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import SingleSelect from "./images/single-select.webp"; + +export const metadata = { + title: "Single Select", + description: "Single select questions allow respondents to select one answer from a list", +}; + +#### Question Type + +# Single Select + +Single select questions allow respondents to select one answer from a list. Displays a title and a list of radio buttons for the respondent to choose from. + + + +## Elements + + +### Title +Add a clear title to inform the respondent what information you are asking for. + +### Description +Provide an optional description with further instructions. + +### Options +The list of answers the respondent can choose from. + +### Additional Actions + +- Add "Other": Adds an "Other" option to allow respondents to enter a custom answer. This will show two inputs, one for the label text and one for the placeholder. + +- Convert to Multiple Select: Converts the question to a multiple select question. This will show checkboxes instead of radio buttons. + +- Order dropdown: Allows you to choose the order in which the options are displayed. + - Keep current order: Options will be displayed in the order you added them. + - Randomize all: Options will be displayed in a random order. + - Randomize all except last option: Options will be displayed in a random order, except for the last one. \ No newline at end of file diff --git a/apps/docs/app/global/question-type/statement-cta/images/statement-CTA.webp b/apps/docs/app/global/question-type/statement-cta/images/statement-CTA.webp new file mode 100644 index 0000000000..c0762f3198 Binary files /dev/null and b/apps/docs/app/global/question-type/statement-cta/images/statement-CTA.webp differ diff --git a/apps/docs/app/global/question-type/statement-cta/page.mdx b/apps/docs/app/global/question-type/statement-cta/page.mdx new file mode 100644 index 0000000000..3259b813e3 --- /dev/null +++ b/apps/docs/app/global/question-type/statement-cta/page.mdx @@ -0,0 +1,29 @@ +import { MdxImage } from "@/components/MdxImage"; +import SurveyEmbed from "@/components/SurveyEmbed"; +import StatementCTA from "./images/statement-CTA.webp"; + +#### Question Type + +# Statement (Call to Action) + +The Statement question type allows you to display descriptive information in your survey, such as a message or instruction. It consists of a title (can be Question or Short Note) and a description, which can be a brief note(realted to CTA) or guideline. Instead of collecting input, this type includes a call to action button for further steps, such as booking an interview call. + + + +## Elements + + +### Title +This is the main question or heading that appears at the top of the card. + +### Description +A brief note or instruction displayed under the title, typically used to provide context or instructions for the next step. + +### Button Options +- Button to continue in survey: This will continue respondent with the survey, form or fillups. +- Button to link to external URL: Selecting this option will open-up URL input box bellow when us set URL the button will redirect to your setted link. \ No newline at end of file diff --git a/apps/docs/components/SurveyEmbed.tsx b/apps/docs/components/SurveyEmbed.tsx new file mode 100644 index 0000000000..38add690db --- /dev/null +++ b/apps/docs/components/SurveyEmbed.tsx @@ -0,0 +1,25 @@ +import React from "react"; + +interface SurveyEmbedProps { + surveyUrl: string; +} + +const SurveyEmbed: React.FC = ({ surveyUrl }) => { + return ( +
+