Embed widgets

One script tag. Renders a sandboxed iframe with the right service. Auto-resizes with content.

Overview

Every embeddable service ships with the same loader at https://app.softsolz.uk/softsolz.js. The tag's data-* attributes tell it what to render and which public key to use.

Install the loader

<script src="https://app.softsolz.uk/softsolz.js"
  data-public-key="pk_live_…"
  data-service-id="forms"
  data-form-slug="contact-us"></script>

Embeddable services

The same loader renders different services - data-service-id picks which one, and the remaining data-* attributes are service-specific.

Service	`data-service-id`	Extra attributes	Renders
Forms	`forms`	`data-form-slug`	A themed form that posts submissions.
Blogs	`blogs`	-	Your published blog - post list and full posts.
Payments	`payments`	`data-token`	A checkout widget that takes payment for a payment link.
Customer Auth	`customer-auth`	-	A hosted signup, login and password-reset flow.
Knowledge Chat	`smart-chat`	`data-mode`	A chat widget that answers from your Knowledge Base.

Blogs widget

Renders your published blog - post list and individual posts - styled to match your brand. Just the loader and your public key, no extra attributes.

<script src="https://app.softsolz.uk/softsolz.js"
  data-service-id="blogs"
  data-public-key="pk_live_…"></script>

See the Blogs API for pulling posts server-side or the RSS feed.

Payments checkout widget

Drop a card payment onto any page. data-token is the payment link token created in the SoftSolz app (Payments) or via the Payments API. The buyer pays by card; the money settles directly into your connected Stripe account.

<script src="https://app.softsolz.uk/softsolz.js"
  data-service-id="payments"
  data-public-key="pk_live_…"
  data-token="lnk_8f3c2a1b9d"></script>

Prefer no script at all? A payment link's https://app.softsolz.uk/pay/link/<token> URL works as a plain anchor - see the Payments API for the zero-code button.

Customer Auth widget

Renders the hosted signup, login and password-reset flow. The pk_* key's domain allowlist gates where it loads.

<script src="https://app.softsolz.uk/softsolz.js"
  data-service-id="customer-auth"
  data-public-key="pk_live_…"></script>

See the Customer Auth API for verifying the session token from your backend.

Knowledge Chat widget

A chat bubble that answers from the Knowledge Base collections bound to the key. Add data-mode="floating" for a bottom-right bubble; omit it for an inline widget.

<script src="https://app.softsolz.uk/softsolz.js"
  data-service-id="smart-chat"
  data-public-key="pk_live_…"
  data-mode="floating"></script>

See the Knowledge Chat API for the server-side search and message endpoints.

Modes

Mode	Best for	Layout
`inline` (default)	Forms, lead-gen, surveys	Replaces the script's position in the page; resizes with content.
`floating`	Widgets that should appear as a persistent button	Fixed bottom-right; toggles open/closed.

Custom mount point (inline only)

<div id="contact"></div>
<script src="https://app.softsolz.uk/softsolz.js"
  data-public-key="pk_live_…"
  data-service-id="forms"
  data-form-slug="contact-us"
  data-mount="#contact"></script>

Origin allowlist

Every public key carries a list of allowed origins (e.g. https://example.com, https://www.example.com). A request from anywhere else is rejected - the widget refuses to load.

Origins are matched on scheme + host + port. Use both www and apex if you serve both.

Try it

The Playground lets you paste your public key, load the real widget on an example page, and copy the server code - one page per service.

Caveats

Don't load the script twice on one page.
The widget runs inside an iframe - your page's CSS won't leak in. Theme the form on its Theme tab in the dashboard.
The loader injects a <div> right after the script tag (or your data-mount target). Don't move it after load.
Auto-resize uses postMessage with an origin lock to the embed base - third-party scripts can't resize the iframe.