Embedding the Ordafy Widget on Your Website

What this guide covers

Paste Ordafy share links and embed snippets into common website builders so customers can book services or order products without leaving your brand. Get your snippet first from Getting share links & embed codes.

Before you start

• Have your embed code ready (business, service, or product level).
• Add your site URL under Settings → Website integration → Allowed origins in Ordafy Business.
• Keep async on the script tag so page load is not blocked.
• Publish the service or product you are embedding.

Plain HTML / custom site

1. Paste the <div id="ordafy-widget"></div> where the widget should appear.
2. Paste the <script> block immediately before </body> or after the div.
3. Deploy and test booking or checkout end-to-end on mobile and desktop.

<section class="booking">
  <h2>Book online</h2>
  <div id="ordafy-widget"></div>
</section>
<script async src="https://widget.ordafy.com/v1/widget.js"
  data-type="business" data-id="your-org-slug"></script>

WordPress

Option A — Link only (fastest)

1. Edit a page or add a Button block.
2. Set the URL to your Ordafy book link (for example https://ordafy.com/book/your-org-slug).
3. Label: “Book appointment” or “Order online”.

Option B — Inline widget

1. Add a Custom HTML block where you want the widget.
2. Paste the full embed snippet from Ordafy.
3. Update/publish. Some themes require “Unfiltered HTML” for administrator accounts.

Tip: For a site-wide floating booking button, use a header/footer injection plugin with the popup snippet (data-mode="popup").

Wix

1. Link: Add a Button → Link → Web address → paste your Ordafy share URL.
2. Embed: Add → Embed → Embed HTML → paste the Ordafy snippet → Apply.
3. Resize the embed box so the widget has enough height (try 600–800px for booking flows).

Squarespace

1. Link: Add a Button block → link to your Ordafy URL.
2. Embed: Add block → Code → paste embed snippet.
3. On Business plans, Code blocks run on the live site; preview may not execute third-party scripts.

Shopify

1. Promo page: Online Store → Pages → Add page → use a Code/HTML section with a data-type="product" or data-type="service" snippet.
2. Navigation: Online Store → Navigation → add a menu item linking to ordafy.com/book/... or ordafy.com/store/....
3. Theme Liquid (advanced): Insert the snippet in a custom section; avoid duplicating script tags on every page load.

Webflow

1. Add an Embed element to the canvas.
2. Paste the Ordafy HTML + script snippet.
3. Publish the site — embeds often do not run in Designer preview for external scripts.

Google Sites / Carrd / link-in-bio

These builders often restrict custom JavaScript. Use a share link or button URL to your Ordafy service/product page instead of an inline embed. Service-level links work well for Instagram bio and Linktree.

Popup / floating button

Add the script (no div required for popup mode):

<script async src="https://widget.ordafy.com/v1/widget.js"
  data-type="service"
  data-id="bridal-makeup"
  data-mode="popup"
  data-label="Book bridal makeup">
</script>

Place once in the site footer or global custom code.

Troubleshooting

• Widget blank — Check allowed origins in Ordafy; open browser developer tools for blocked script or CORS errors.
• Wrong catalogue — Verify data-type and data-id match the item you shared.
• Cut off on mobile — Increase embed container min-height; test on real devices.
• CSP blocks script — Ask your host to allow widget.ordafy.com in script-src.

Link-only fallback (always works)

<a href="https://ordafy.com/s/your-org/mens-haircut"
   class="your-button-class">
  Book men's haircut
</a>

Frequently asked questions

My builder blocks scripts—what then?

Use a share link or button URL. You still get Ordafy checkout without an inline widget.

Can I style the widget?

Use data-theme and data-primary-color from Website integration defaults, then match surrounding page layout with your own CSS around the embed container.

How do I use this for ads?

See service & product widgets for campaigns.

Go live checklist

Allowed origins set, snippet pasted once, test booking/order on mobile. Overview: widgets overview. Become a provider · Pricing · Shop.