feat: embed form

getpingback · Apr 10, 2024 · 86a6c50 · 86a6c50
1 parent 63feea9
commit 86a6c50
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 10 deletions.
diff --git a/docs/embed/_category_.json b/docs/embed/_category_.json
@@ -1,5 +1,5 @@
 {
-  "label": "Embed",
+  "label": "Embeddable Form",
   "position": 2,
   "link": {
     "type": "generated-index",

diff --git a/docs/embed/introduction.md b/docs/embed/introduction.md
diff --git a/docs/embed/introduction.mdx b/docs/embed/introduction.mdx
@@ -0,0 +1,127 @@
+---
+sidebar_position: 1
+---
+
+# Introduction
+
+Pingback provides you with ready-to-use embeddable forms directly inside your website.
+
+Easily collect data from your users without the need to build forms from scratch. Pingback embeddable forms are customizable, secure, and easy to integrate into your website.
+
+## Setup
+
+To get started, you need to include the Pingback script in your website. You can do this by adding the following script tag to your HTML file:
+
+```html
+<script src="https://widget.pingback.com"></script>
+```
+
+You can add this script tag to the `<head>` or `<body>` section of your HTML file.
+
+## Usage
+
+### Embedding a Form
+
+To embed a form in your website, add the following HTML snippet to your page:
+
+```html
+<pb-embeddable-form channel_id="your_channel_id"></pb-embeddable-form>
+```
+
+Replace `your_channel_id` with the ID of the channel you want to use for the form. If you don't know the channel ID, you can ask our [**support team**](https://helpcenter.pingback.com/).
+
+### Options
+
+All the attributes can be setup without the need to write any JavaScript code. Just go to the [Embed page](https://pingback.com/publish/settings/embed) in your Pingback account and copy the code snippet.
+
+However, if you want to have a better understanding, you can customize the appearance and behavior of the form by passing additional attributes to the `<pb-embeddable-form>` tag. Here are some of the available options:
+
+#### Behavior
+
+- `channel_id`: The ID of the channel you want to use for the form.
+- `segment_id`: The ID of the segment you want to use for the form. _Optional_.
+- `product_id`: The ID of the product you want to use for the form. _Optional_.
+
+#### Customizing
+
+- `call_to_action`: The text displayed on the submit button. Default is _"Inscrever"_.
+- `thanks_message`: The message displayed to the user after submitting the form. Default is _"Inscrição realizada com sucesso! Em breve você receberá novidades por email."_. If you want to redirect the user after submitting the form, you can use the `redirect_url` attribute instead.
+- `redirect_url`: The URL to redirect the user after submitting the form. _Optional_.
+- `theme_mode`: The color theme of the form:
+  - `light` _Default_.
+  - `dark`
+- `theme_color`: One of the Pingback predefined colors:
+  - `purple-classic` _Default_.
+  - `mint`
+  - `cyan`
+  - `teal`
+  - `blue`
+  - `navy-blue`
+  - `magenta`
+  - `pink`
+  - `indigo`
+  - `green`
+  - `lime`
+  - `dark-green`
+  - `scarlet`
+  - `crimson`
+  - `red`
+  - `salmon`
+  - `bronze`
+  - `yellow`
+  - `orange`
+  - `black`
+
+#### Predefined Fields
+
+Email is a required field. You can choose to show or hide the name and phone fields:
+
+- `show_name`: Whether to show the name field. Default is `false`.
+- `show_phone`: Whether to show the phone field. Default is `false`.
+
+#### Custom Fields
+
+You can add custom fields to the form by using the ones that are available in your channel. If you don't know the available fields, you can ask our [**support team**](https://helpcenter.pingback.com/).
+
+You can add up to 5 custom fields to the form. The attribute name should follow the pattern `custom_field_<index>`, where `<index>` is a number from 1 to 5.
+
+The available attributes are:
+
+- `custom_field_<index>_id`: The ID of the custom field.
+- `custom_field_<index>_type`: The type of the custom field. Possible values are:
+  - `text`
+  - `dropdown`
+- `custom_field_<index>_label`: The label of the custom field.
+- `custom_field_<index>_helper`: The helper text of the custom field. _Optional_.
+- `custom_field_<index>_options`: The options of the custom field. Required for dropdown fields. Example: `"Option 1, Option 2,Option 3"`.
+- `custom_field_<index>_required`: Whether the custom field is required. Default is `false`.
+- `custom_field_<index>_placeholder`: The placeholder text of the custom field. _Optional_.
+
+---
+
+## Demos
+
+### Default Form
+
+<pb-embeddable-form theme_color="purple-classic"></pb-embeddable-form>
+
+### Name and Phone Fields
+
+<pb-embeddable-form show_name show_phone theme_color="purple-classic"></pb-embeddable-form>
+
+### Custom Fields
+
+<pb-embeddable-form
+show_name
+show_phone
+custom_field_1_id="1"
+custom_field_1_type="text"
+custom_field_1_label="CPF"
+custom_field_1_placeholder="000.000.000-00"
+custom_field_1_required
+custom_field_2_id="2"
+custom_field_2_type="dropdown"
+custom_field_2_label="Estado Civil"
+custom_field_2_placeholder="Selecione"
+custom_field_2_options="Solteiro(a),Casado(a),Divorciado(a),Viúvo(a)"
+theme_color="purple-classic"></pb-embeddable-form>
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -24,6 +24,12 @@ const config = {
     locales: ["en"],
   },
 
+  scripts: [
+    {
+      src: "https://widget.pingback.com",
+    }
+  ],
+
   presets: [
     [
       "classic",
@@ -72,6 +78,10 @@ const config = {
                 label: "API Reference",
                 to: "/docs/api/introduction",
               },
+              {
+                label: "Embeddable Form",
+                to: "/docs/embed/introduction",
+              },
               {
                 label: "Email Verification Library",
                 to: "/docs/email-verification-library/introduction",

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -40,6 +40,25 @@ export default function Home() {
     }
   }, [shine]);
 
+  const ProductCard = ({ title, description, href }) => (
+    <Link to={href}>
+      <div className={styles.product}>
+        <div className={styles.productHeader}>
+          <h3>{title}</h3>
+          <svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <path
+              d='M14.8161 4.4569C15.116 4.17123 15.5908 4.18281 15.8764 4.48276L22.5431 11.4828C22.819 11.7724 22.819 12.2276 22.5431 12.5172L15.8764 19.5172C15.5908 19.8172 15.116 19.8288 14.8161 19.5431C14.5161 19.2574 14.5046 18.7827 14.7902 18.4828L20.25 12.75L2 12.75C1.58579 12.75 1.25 12.4142 1.25 12C1.25 11.5858 1.58579 11.25 2 11.25L20.25 11.25L14.7902 5.51724C14.5046 5.2173 14.5161 4.74256 14.8161 4.4569Z'
+              fill='currentColor'
+              fillRule='evenodd'
+              clipRule='evenodd'
+            ></path>
+          </svg>
+        </div>
+        <p>{description}</p>
+      </div>
+    </Link>
+  );
+
   return (
     <Layout description='Pingback API Documentation for Devs. Build with Pingback'>
       <main className={styles.main}>
@@ -59,11 +78,25 @@ export default function Home() {
             </span>
           </h1>
 
-          <p className={styles.subtitle}>Get started with the Pingback API and integrate with your product.</p>
+          <p className={styles.subtitle}>Explore Pingback's products and start building with us.</p>
 
-          <Link to='/docs/api/introduction' className={clsx("button button--primary", styles.button)}>
-            Get Started
-          </Link>
+          <div className={styles.products}>
+            <ProductCard
+              title='API Reference'
+              description='Integrate Pingback services into your application.'
+              href='/docs/api/introduction'
+            />
+            <ProductCard
+              title='Embeddable Form'
+              description='Embed a form in your website to collect user data.'
+              href='/docs/embed/introduction'
+            />
+            <ProductCard
+              title='Email Verification Library'
+              description='Verify email addresses using SMTP connection.'
+              href='/docs/email-verification-library/introduction'
+            />
+          </div>
         </section>
       </main>
     </Layout>

diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -56,6 +56,57 @@
   transition: all 0.2s ease;
 }
 
+.products {
+  display: flex;
+  gap: 16px;
+  margin: 32px 0;
+}
+
+.products a {
+  text-decoration: none;
+}
+
+.product {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0px 0px 0px 1px var(--docusaurus-highlighted-code-line-bg);
+  width: 360px;
+  transition: all 0.2s ease;
+}
+
+.productHeader {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.product svg {
+  color: var(--ifm-font-color-secondary);
+}
+
+.product h3 {
+  color: var(--ifm-font-color-secondary);
+}
+
+.product p {
+  margin: 0;
+  text-align: left;
+  color: var(--ifm-font-color-secondary);
+}
+
+.product:hover {
+  box-shadow: 0px 0px 0px 1px var(--ifm-color-primary);
+}
+
+.product:hover h3,
+.product:hover svg {
+  color: var(--ifm-color-primary);
+}
+
 @media (min-width: 1024px) {
   .title {
     font-size: 4.5rem;
@@ -67,3 +118,9 @@
     line-height: 1.75rem;
   }
 }
+
+@media (max-width: 1100px) {
+  .products {
+    flex-direction: column;
+  }
+}