Loclie

For Business Owners

Embeddable Widgets

Add a small Loclie listing widget to your own website. The widget shows your business name, today's status (open/closed), contact details, and a link back to your full Loclie listing. Always-current — when you update your hours on Loclie, the widget updates too.

Time to complete: 5 minutes

What Are Embeddable Widgets?

An embeddable widget is a small iframe you can drop into any website (your own site, your booking page, a Squarespace block, a WordPress post) that shows a live view of your Loclie business listing. Visitors to your site see today's opening status, your address and phone number, and a "View on Loclie" link.

Benefits:

  • Zero maintenance — Update hours on Loclie, the widget updates automatically
  • Always-current opening status — Live "Open now" / "Closed" indicator
  • Drives traffic back — Visitors can click through to your full Loclie listing for reviews, campaigns, and directions
  • Lazy-loaded — Won't slow down your page (loads only when scrolled into view)
  • Free — No cost to embed

Two Widget Styles

The Embed page offers two preset styles:

StyleDimensionsBest For
Compact200 × 120Sidebars, footers, narrow columns
Full360 × 400Contact page, dedicated "Find us" section, hero blocks

Both styles include the business name, opening status, and a link back to Loclie. The Full widget additionally shows your image, full address, phone, and a Get Directions button.

Generating Your Embed Snippet

Step 1: Open the Embed Page

  1. Sign in to the Manage portal at manage.loclie.com.au
  2. Open your Business Dashboard
  3. Click the Widget & Embed quick action
  4. Or go directly to manage.loclie.com.au/business-dashboard/embed

Step 2: Choose Your Business

If you manage multiple businesses, pick the one you want to embed from the dropdown at the top. The page generates separate snippets for each business.

Slug Required

If you see an amber warning that "This business has no slug set yet", your business listing needs a stable URL slug before the widget can work. Open Edit Profile and save a slug first — usually just your business name with hyphens (e.g., corner-cafe-finley).

Step 3: Pick a Theme and Accent Colour

Theme controls the widget's background and text colour:

  • Auto (match site) — Inherits the visitor's system preference (light or dark mode). Best default if your own site supports both modes.
  • Light — White background, dark text. Locks the widget to light mode regardless of visitor preference.
  • Dark — Dark background, light text. Locks to dark mode.

Accent colour controls the button and highlight colour. The default is Loclie orange (#ea580c). Pick something that matches your brand — the live preview updates instantly.

Step 4: Copy the Snippet

Each style (Compact and Full) shows:

  • The full <iframe> HTML snippet
  • A Copy snippet button
  • A Live preview rendered right on the page so you can see exactly what visitors will get

Click Copy snippet to copy the HTML to your clipboard. Paste it into your website's HTML where you want the widget to appear.

Pasting the Snippet Into Common Site Builders

WordPress (Classic Editor)

  1. Open the post or page
  2. Switch to the Text (HTML) tab
  3. Paste the snippet where you want it
  4. Save

WordPress (Block Editor)

  1. Add a Custom HTML block
  2. Paste the snippet
  3. Click Preview to see it render

Squarespace

  1. Open the page editor
  2. Click the + to add a block
  3. Choose Code
  4. Paste the snippet
  5. Save

Wix

  1. Open the page editor
  2. Add → Embed → Custom Embeds → HTML iframe
  3. Paste the snippet
  4. Resize the box to match the widget dimensions

Plain HTML

Just paste the snippet directly into your HTML file anywhere inside the <body>.

Snippet Anatomy

A copied snippet looks like this:

<iframe src="https://app.loclie.com.au/widget/business/your-slug?style=full&theme=auto"
        width="360" height="400" frameborder="0" loading="lazy"
        title="Find us on Loclie"></iframe>

The parts you might want to tweak by hand:

  • width / height — Override if you need a custom size (the widget content will scale)
  • style=full / style=compact — Controls the widget layout
  • theme=auto / theme=light / theme=dark — Sets the colour mode
  • accent=ff6600 — Optional accent colour (no # prefix when used in the URL)

The loading="lazy" attribute means the widget only loads when the visitor scrolls near it, so it won't slow down your page.

Widget Analytics

The Widget Analytics panel on the Embed page shows how many times your widget has loaded across all the sites that embed it.

What you'll see:

  • Total widget loads in the last 30 days
  • Daily breakdown chart
  • Per-site origin breakdown — see which of your sites is driving the most widget views
  • An "EMBED_SNIPPET_COPIED" event fires each time you copy a snippet (useful to track installation intent)

No data yet?

The analytics panel auto-suppresses until your widget has been loaded at least once. If you just installed the snippet, give it a few minutes for the first event to land.

Best Practices

DO

  • Match your site theme — Use Auto mode if your site supports light + dark, or pick the mode that matches your fixed brand
  • Place near contact info — Footer, contact page, and "Find Us" sections are highest-converting
  • Use Full style for primary placements — More visible status indicator, includes the Get Directions button
  • Use Compact for sidebars — Doesn't dominate the layout but still gives visitors live opening status

DON'T

  • Don't embed multiple times on the same page — One widget per page is plenty; multiple iframes slow down rendering
  • Don't shrink below 200 × 120 — Text and buttons become unreadable
  • Don't strip loading="lazy" — Without it, the iframe loads on every page view even if visitors never scroll to it

Troubleshooting

"The widget shows 'Business not found'"

Causes:

  • The slug in the URL doesn't match an existing business
  • The business is in hidden visibility mode
  • The business was deleted

Fix: Re-copy the snippet from the Embed page — the URL slug is generated from your current business.

"The widget is blank or shows an error"

Causes:

  • Your site is served over HTTP but the widget URL is HTTPS (mixed-content block)
  • A browser extension is blocking iframes

Fix: Serve your own site over HTTPS. If using a CMS that doesn't support HTTPS, the widget can't be embedded there.

"My accent colour isn't applying"

Causes:

  • The colour value includes a # in the URL — the widget expects a 6-character hex without the #
  • The colour was copied from a tool that included the #

Fix: Re-copy the snippet from the Embed page — the UI handles the prefix correctly. Or edit the snippet manually to remove the # from the accent= parameter.

"Want a WordPress shortcode or React component?"

Email team@loclie.com.au — we're collecting demand for first-class plugins. Until then, the iframe works in every site builder we've tested.

Privacy

The widget loads only public information about your business — the same details visitors see on your Loclie listing. It does not send any data about your site's visitors back to Loclie beyond the standard iframe load (URL, referrer, basic browser info — used for the per-site origin breakdown in analytics).

If you operate in the EU and need to disclose the widget in a cookie consent banner, treat it as a third-party embed that uses no cookies by default (Loclie's widget loads anonymously unless a visitor signs in to Loclie via the iframe, which is rare).

Next Steps

Now that your widget is live:

Need help?

Previous
Campaign Alerts (Full Guide)
Next
Analytics & Insights