Web2Phone Embed.js Reference

embed.js is the JavaScript helper that powers Web2Phone’s copy-and-paste forms. It finds forms marked with data-web2phone="form", sends the data to Web2Phone, and shows basic success/error messages.

Use this page if you’re a developer integrating Web2Phone into a custom site, React/Vue app, or any front-end where you want to understand exactly what the embed script expects.

1. When should I use embed.js?

The easiest way to use Web2Phone is to use the full embed snippet from your form settings. It includes: 

<form data-web2phone="form"
  data-public-key="YOUR_PUBLIC_KEY"
  data-endpoint="https://web2phone.co.uk/api/v1/submit/">

  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Message" required></textarea>

  <button type="submit">Send</button>
  <p data-w2p-output></p>
</form>

<script src="https://web2phone.co.uk/static/formsapp/js/embed.js"></script>

As long as the data-* attributes and the script tag are present on the page, embed.js will handle the submission for you.

2. Required data attributes

Web2Phone forms are configured using HTML data-* attributes. These are the important ones:

data-web2phone

Marks the form as managed by Web2Phone. 

<form data-web2phone="form"> ... </form>

Only forms with data-web2phone="form" are handled by embed.js.

data-public-key

Identifies which Web2Phone form is being used. 

data-public-key="YOUR_PUBLIC_KEY"

You’ll find the public key in the form’s settings screen in your Web2Phone dashboard.

data-endpoint

The URL that receives the submission. 

data-endpoint="https://web2phone.co.uk/api/v1/submit/"

This is usually the same for all forms. The form configuration (including the public key and allowed domains) tells Web2Phone which form to use.

data-w2p-output (optional)

An element where embed.js will write status messages (success or error). 

<p data-w2p-output></p>

You can style this element however you like. If you omit it, submissions will still be sent, but users won’t see text feedback from embed.js unless you add your own.

3. What data does embed.js send?

When the user submits the form, embed.js:

  1. Prevents the normal browser form submission (no page reload).
  2. Collects all <input>, <textarea> and <select> elements with a name attribute.
  3. Sends a POST request to data-endpoint including:
    • Your public key.
    • The origin domain (checked against Allowed Domains).
    • All form fields as key/value pairs using their name attributes.

On the Web2Phone side, these fields are transformed into WhatsApp and/or email messages. The order and labels come directly from the names and values you use in your HTML form.

4. Success & error behaviour

After sending the request, embed.js looks at the response status:

  • On success (valid form, allowed domain, no delivery error), embed.js:
    • Updates the data-w2p-output element with a success message, if present.
    • Optionally clears the form fields, depending on configuration.
  • On error (invalid domain, missing key, validation failure, or network issue), embed.js:
    • Updates the data-w2p-output element with a generic error message.
    • Leaves the form fields as-is so the user can try again.

You can style the data-w2p-output element (colour, margin, font size) to match your site’s design.

5. Common integration tips

  • Always keep the script tag:
    Some page builders or CMSs strip <script> tags. If embed.js is removed, the form will no longer send via Web2Phone.
  • Use clear field names:
    Names like name, email, phone, message produce clean, readable messages.
  • Make sure Allowed Domains is correct:
    Only the hostname is needed (for example example.com, myapp.vercel.app, yourusername.github.io). Don’t include https://, www., paths or wildcards.
  • One script per page is enough:
    You can have multiple Web2Phone forms on a page. As long as they all use data-web2phone="form", a single embed.js script tag will handle them all.

6. Related integration guides

You might also find these useful:

For support, you can always email support@web2phone.co.uk.