Skip to content

Commit

Permalink
Merge pull request #1 from getpingback/feat/new-fields
Browse files Browse the repository at this point in the history 
update documentation
  • Loading branch information
@roger067
roger067 authored Nov 11, 2024
2 parents 900d26e + 3173629 commit b7d1164
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 88 deletions.
177 changes: 102 additions & 75 deletions docs/embed/demos.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,56 +24,34 @@ The following demo shows the simplest way to embed the Pingback Form into your w

## Adding Name and Phone Fields

To include name and phone fields in your form, use the `show_name` and `show_phone` attributes.
To include name and phone fields in your form, use the type `phone` and `name` inside `fields` attribute.

<pb-embeddable-form show_name show_phone theme_color="green"></pb-embeddable-form>
<pb-embeddable-form fields='[{"id":"name","label":"Name","type":"name"},{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]' locale="en" theme_color="green"></pb-embeddable-form>

#### Code

```html
<pb-embeddable-form show_name show_phone theme_color="green"></pb-embeddable-form>
<pb-embeddable-form
fields='[{"id":"name","label":"Name","type":"name"},{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
theme_color="green"
></pb-embeddable-form>
```

---

## Custom Fields

You can add custom fields to your form by using the `custom_field_X_id`, `custom_field_X_type`, `custom_field_X_label`, `custom_field_X_placeholder`, and `custom_field_X_required` attributes.

Replace `X` with the field number.
You can add custom fields to your form by using the `fields` attributes.

<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)"
fields='[{"id":"email","label":"Email","type":"email", "placeholder": "Enter your email"},{"id":"1","label":"CPF","type":"text","placeholder":"000.000.000-00"},{"id":"2","label":"Matiral Status","type":"dropdown","placeholder":"Select an option","helper":"Select an option","options":["Single","Married", "Divorced"]}]'
theme_color="orange"></pb-embeddable-form>

#### Code

```html
<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="orange"
fields='[{"id":"email","label":"Email","type":"email", "placeholder": "Enter your email"},{"id":"1","label":"CPF","type":"text","placeholder":"000.000.000-00"},{"id":"2","label":"Matiral Status","type":"dropdown","placeholder":"Select an option","helper":"Select an option","options":["Single","Married", "Divorced"]}]'
></pb-embeddable-form>
```

Expand All @@ -85,32 +63,44 @@ Use the `locale` attribute to change the language of the form. Supported languag

### Portuguese (`pt`)

<pb-embeddable-form show_phone locale="pt" theme_color="green"></pb-embeddable-form>
<pb-embeddable-form fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]' locale="pt" theme_color="green"></pb-embeddable-form>

#### Code

```html
<pb-embeddable-form show_phone locale="pt" theme_color="green"></pb-embeddable-form>
<pb-embeddable-form
fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
locale="pt"
theme_color="green"
></pb-embeddable-form>
```

### English (`en`)

<pb-embeddable-form show_phone locale="en" theme_color="blue"></pb-embeddable-form>
<pb-embeddable-form fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]' locale="en" theme_color="green"></pb-embeddable-form>

#### Code

```html
<pb-embeddable-form show_phone locale="en" theme_color="blue"></pb-embeddable-form>
<pb-embeddable-form
show_phone
locale="en"
theme_color="blue"
></pb-embeddable-form>
```

### Spanish (`es`)

<pb-embeddable-form show_phone locale="es" theme_color="red"></pb-embeddable-form>
<pb-embeddable-form fields='[{"id":"email","label":"Correo electrónico","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]' locale="es" theme_color="green"></pb-embeddable-form>

#### Code

```html
<pb-embeddable-form show_phone locale="es" theme_color="red"></pb-embeddable-form>
<pb-embeddable-form
fields='[{"id":"email","label":"Correo electrónico","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
locale="es"
theme_color="green"
></pb-embeddable-form>
```

---
Expand All @@ -119,12 +109,17 @@ Use the `locale` attribute to change the language of the form. Supported languag

You can customize the call to action button text by using the `call_to_action` attribute.

<pb-embeddable-form show_name show_phone locale="en" call_to_action="Submit" theme_color="magenta"></pb-embeddable-form>
<pb-embeddable-form fields='[{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]' locale="en" call_to_action="Submit" theme_color="magenta"></pb-embeddable-form>

#### Code

```html
<pb-embeddable-form show_name show_phone locale="en" call_to_action="Submit" theme_color="magenta"></pb-embeddable-form>
<pb-embeddable-form
fields='[{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
locale="en"
call_to_action="Submit"
theme_color="magenta"
></pb-embeddable-form>
```

---
Expand All @@ -133,14 +128,23 @@ You can customize the call to action button text by using the `call_to_action` a

To use the dark theme, set the `theme_mode` attribute to `dark`.

<div style={{ backgroundColor: "#282828", padding: "2rem", borderRadius: "0.5rem", marginBottom: "1.5rem" }}>
<pb-embeddable-form theme_mode='dark' theme_color='pink'></pb-embeddable-form>
<div
style={{
backgroundColor: "#282828",
padding: "2rem",
borderRadius: "0.5rem",
marginBottom: "1.5rem",
}}
>
<pb-embeddable-form theme_mode="dark" theme_color="pink"></pb-embeddable-form>
</div>

#### Code

```html
<div style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
<div
style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
<pb-embeddable-form theme_mode="dark" theme_color="pink"></pb-embeddable-form>
</div>
```
Expand All @@ -153,45 +157,51 @@ In this demo, we'll show you how to integrate the Pingback Embeddable Form into

### Contact Us Form

<div style={{ backgroundColor: "#282828", padding: "2rem", borderRadius: "0.5rem", marginBottom: "1.5rem" }}>
<div
style={{
backgroundColor: "#282828",
padding: "2rem",
borderRadius: "0.5rem",
marginBottom: "1.5rem",
}}
>
<h2 style={{ color: "#fafafa", marginBottom: "1rem" }}>Contact Us</h2>
<p style={{ color: "#fafafa", marginBottom: "1.5rem" }}>Fill out the form below to get in touch with us.</p>
<p style={{ color: "#fafafa", marginBottom: "1.5rem" }}>
Fill out the form below to get in touch with us.
</p>
<pb-embeddable-form
show_name
show_phone
locale='en'
theme_mode='dark'
theme_color='teal'
call_to_action='Send Message'
custom_field_1_id='1'
custom_field_1_required
custom_field_1_type='text'
custom_field_1_label='Subject'
custom_field_1_placeholder='Enter subject'
/>
<p style={{ color: "#fafafa", marginTop: "1.5rem" }}>We'll get back to you as soon as possible.</p>
fields='[{"id":"name", "label":"Name", "type":"name"},{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}, {"id": "subject", "label":"Subject", "required": true, "placeholder": "Enter subject"}]'
locale="en"
theme_mode="dark"
theme_color="teal"
call_to_action="Send Message"
/>

<p style={{ color: "#fafafa", marginTop: "1.5rem" }}>
We'll get back to you as soon as possible.
</p>
</div>

#### Code

```html
<div style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
<div
style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
<h2 style="color: #fafafa; margin-bottom: 1rem;">Contact Us</h2>
<p style="color: #fafafa; margin-bottom: 1.5rem;">Fill out the form below to get in touch with us.</p>
<p style="color: #fafafa; margin-bottom: 1.5rem;">
Fill out the form below to get in touch with us.
</p>
<pb-embeddable-form
show_name
show_phone
fields='[{"id":"name", "label":"Name", "type":"name"},{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}, {"id": "subject", "label":"Subject", "required": true, "placeholder": "Enter subject"}]'
locale="en"
theme_mode="dark"
theme_color="teal"
call_to_action="Send Message"
custom_field_1_id="1"
custom_field_1_required
custom_field_1_type="text"
custom_field_1_label="Subject"
custom_field_1_placeholder="Enter subject"
></pb-embeddable-form>
<p style="color: #fafafa; margin-top: 1.5rem;">We'll get back to you as soon as possible.</p>
<p style="color: #fafafa; margin-top: 1.5rem;">
We'll get back to you as soon as possible.
</p>
</div>
```

Expand All @@ -209,7 +219,9 @@ In this demo, we'll show you how to integrate the Pingback Embeddable Form into

</div>

<h2 style={{ color: "#282828", marginBottom: "1rem", textAlign: "center" }}>Subscribe to our Newsletter</h2>
<h2 style={{ color: "#282828", marginBottom: "1rem", textAlign: "center" }}>
Subscribe to our Newsletter
</h2>
<p style={{ color: "#282828", marginBottom: "1.5rem", textAlign: "center" }}>
Sign up to receive the latest news and updates.
</p>
Expand All @@ -221,9 +233,19 @@ In this demo, we'll show you how to integrate the Pingback Embeddable Form into
#### Code

```html
<div style="background-color: #fafafa; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;">
<div style="display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 1.5rem">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<div
style="background-color: #fafafa; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
<div
style="display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 1.5rem"
>
<svg
width="64"
height="64"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.8686 7.75C17.8238 7.75 18.4956 7.75057 19.0172 7.79254C19.5316 7.83395 19.8289 7.91173 20.051 8.02627C20.2074 8.10694 20.3522 8.20302 20.4835 8.31206L16.8619 11.4163C16.4401 11.7779 16.157 12.0197 15.9239 12.189C15.6981 12.3531 15.5702 12.41 15.4732 12.4345C15.2228 12.4978 14.959 12.4819 14.7179 12.3891C14.6246 12.3531 14.5045 12.2812 14.2999 12.0913C14.0888 11.8952 13.8368 11.6212 13.4614 11.2116L11.5529 9.12957C11.273 8.82423 10.7986 8.8036 10.4932 9.0835C10.1879 9.36339 10.1672 9.83782 10.4471 10.1432L12.3759 12.2472C12.7259 12.6291 13.0185 12.9483 13.2792 13.1904C13.5514 13.4432 13.834 13.656 14.1789 13.7888C14.7091 13.9931 15.2896 14.028 15.8405 13.8888C16.1989 13.7983 16.5049 13.621 16.8055 13.4026C17.0933 13.1935 17.4221 12.9117 17.8155 12.5746L21.2294 9.64834C21.2419 9.76929 21.2489 9.90846 21.2499 10.0712C21.2528 10.5664 21.2014 11.2019 21.1266 12.114L20.9297 14.514C20.8647 15.3064 20.819 15.8555 20.7484 16.2818C20.735 16.3626 20.721 16.4367 20.7064 16.505L18.5695 14.0119C18.2999 13.6974 17.8265 13.661 17.512 13.9306C17.1975 14.2001 17.161 14.6736 17.4306 14.9881L19.8424 17.8019C19.7229 17.8861 19.5944 17.9601 19.4583 18.0227C19.2503 18.1182 18.984 18.1814 18.5373 18.2152C18.0824 18.2495 17.5015 18.25 16.6717 18.25L12.5743 18.25C11.6004 18.25 10.9179 18.2494 10.3912 18.204C9.98873 18.1693 9.72464 18.1113 9.52892 18.0318L12.5304 15.0303C12.8233 14.7374 12.8233 14.2626 12.5304 13.9697C12.2375 13.6768 11.7626 13.6768 11.4697 13.9697L8.45886 16.9805C8.4315 16.924 8.40643 16.8662 8.38375 16.8072C8.29757 16.583 8.25783 16.2848 8.29068 15.7645C8.32397 15.2369 8.42466 14.5619 8.56924 13.5988L9.01771 10.6114C9.0792 10.2017 8.79698 9.81983 8.38736 9.75834C7.97774 9.69684 7.59582 9.97906 7.53433 10.3887L7.08071 13.4103C6.97312 14.127 6.88206 14.7336 6.82912 15.25H4C3.58579 15.25 3.25 15.5858 3.25 16C3.25 16.4142 3.58579 16.75 4 16.75H6.82619C6.85854 16.9542 6.9093 17.152 6.9836 17.3453C7.29518 18.156 7.87847 18.8334 8.6339 19.2619C9.11344 19.5339 9.6491 19.6456 10.2624 19.6984C10.8611 19.75 11.6084 19.75 12.5396 19.75L16.7014 19.75C17.4946 19.75 18.1322 19.75 18.6502 19.7109C19.1831 19.6707 19.6481 19.5861 20.0842 19.3858C20.7837 19.0646 21.3717 18.5472 21.7675 17.8956C22.0163 17.4859 22.1435 17.0385 22.2282 16.5269C22.3102 16.0324 22.3603 15.4215 22.422 14.6684L22.6244 12.202C22.6957 11.3328 22.7533 10.6313 22.7499 10.0622C22.7464 9.47648 22.6798 8.95659 22.4554 8.47153C22.1015 7.70682 21.4952 7.08335 20.7385 6.69313C20.2632 6.44797 19.7403 6.3459 19.1375 6.29738C18.5487 6.24999 17.8164 6.24999 16.9009 6.25L2 6.25003C1.58579 6.25003 1.25 6.58581 1.25 7.00003C1.25 7.41424 1.58579 7.75003 2 7.75003L16.8686 7.75Z"
fill="#666666"
Expand All @@ -239,18 +261,23 @@ In this demo, we'll show you how to integrate the Pingback Embeddable Form into
</svg>
</div>

<h2 style="color: #282828; margin-bottom: 1rem; text-align: center;">Subscribe to our Newsletter</h2>
<p style="color: #282828; margin-bottom: 1.5rem; text-align: center;">Sign up to receive the latest news and updates.</p>
<h2 style="color: #282828; margin-bottom: 1rem; text-align: center;">
Subscribe to our Newsletter
</h2>
<p style="color: #282828; margin-bottom: 1.5rem; text-align: center;">
Sign up to receive the latest news and updates.
</p>

<pb-embeddable-form
show_name
locale="en"
theme_mode="dark"
theme_color="yellow"
call_to_action="Subscribe"
></pb-embeddable-form>

<p style="color: #282828; margin-top: 1.5rem; text-align: center; font-size: 0.8rem; font-weight: bold;">
<p
style="color: #282828; margin-top: 1.5rem; text-align: center; font-size: 0.8rem; font-weight: bold;"
>
Over 654,000 subscribers
</p>
</div>
Expand Down
38 changes: 25 additions & 13 deletions docs/embed/introduction.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,28 +73,40 @@ For those who want to dive deeper, you can customize the appearance and behavior

#### Field Options

Email is a required field. You can choose to show or hide the name and phone fields:
Email is a required field and if you set `<pb-embeddable-form />` without attributes, it will show email field by default. To pass other fields, you can use the following code as an example:

- `show_name`: Show or hide the name field (default: `false`).
- `show_phone`: Show or hide the phone field (default: `false`).
```html
<pb-embeddable-form
fields='[{"id":"name","label":"Name","type":"name"},{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
></pb-embeddable-form>
```

Types `name`, `email` and `phone` has some preset fields behavior.

#### 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.
You can add custom fields using the attribute `fields` as well, like in the code below:

```html
<pb-embeddable-form
fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"1","label":"Custom Text","type":"text","placeholder":"type something"},{"id":"2","label":"Select an option","type":"dropdown","placeholder":"Some option","helper":"helper","options":["option 1","option 2"]}]'
>
</pb-embeddable-form>
```

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_.
| **Attribute** | **Description** | **Possible Values** |
| ------------- | -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
| `id` | The ID of the custom field. | `string` |
| `type` | The type of the custom field. | `text`, `dropdown`, `email`, `name`, `phone` |
| `label` | The label of the custom field. | `string` |
| `helper` | The helper text for the custom field. _Optional._ | `string` |
| `options` | The options for the custom field. Required for fields of type `dropdown`. Example: `"Option 1, Option 2, Option 3"`. | `Array<string>` (only for `dropdown`) |
| `required` | Indicates whether the field is mandatory. The default value is `false`. | `true`, `false` |
| `placeholder` | The placeholder text for the custom field. _Optional._ | `string` |

---

Expand Down

0 comments on commit b7d1164

Please sign in to comment.