Embedding the Ordafy Widget on Your Website

Introduction

This guide shows how to add Ordafy share links and embed snippets to common website builders. Get your snippet from Getting share links & embed codes first.

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.
• Use async on the script tag so your page load is not blocked.

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.

<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 (e.g. 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 site-wide floating booking, 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. Product/service promo page: Online Store → Pages → Add page → use Code/HTML section with embed snippet for a data-type="product" or data-type="service" campaign.
2. Navigation: Online Store → Navigation → add menu item linking to ordafy.com/book/... or ordafy.com/store/....
3. Theme liquid (advanced): Insert snippet in a custom section template; 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 do not run in the 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 inline embed. Service-level links work well for Instagram bio and Linktree.

Popup / floating button

Add only the script (no div required for some modes):

<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 site footer or global custom code.

Troubleshooting

• Widget blank — Check allowed origins in Ordafy; open browser devtools for blocked script or CORS errors.
• Wrong catalog — 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>