Dock on your own website — Widget Guide

Your personalised copy-paste snippet — with your IDs already filled in — is in your Dock workspace under Settings → Widget Integration. It looks like this:

<script src="https://app.mydock.io/widget.js" type="module"></script>
<solopress-configurator
  tenant-id="YOUR-TENANT-ID"
  api-key="sk_your-api-key"
></solopress-configurator>

Paste it where the configurator should appear. The tenant-id and api-key are safe to have in page code — they identify your catalogue and can only read what a customer needs. Your Server Secret is different: it must never appear in a web page.

Out of the box the widget follows the branding set in your Dock workspace (Settings → Branding): your Brand Colour becomes the accent and your Widget Theme the base palette, applied automatically when the widget loads. Change them in Dock and every embed updates — no site edits.

If you want to pin styling per page instead, the element accepts optional attributes that always win over the Dock settings: theme="light | dark | minimal | branded" (Branded follows your Dock branding and is usually the one to pick) and accent-color="#hex". You can also preset a specific product with product="…" (the product's Dock ID) to skip the product picker, hide the built-in heading with hide-title, and set locale="…" for number/currency formatting.

The snippet gives your customers the full configure–price–artwork experience, ending in an Add to Basket click. Connecting that basket to your site's own checkout — so completed purchases become Dock orders — is a small server-side integration your web developer does once (it uses your Server Secret, which is why it can't happen in the page itself): one browser event listener, then two server calls at checkout. The Custom Site Integration guide walks your developer through it with working code samples (plain PHP — any stack works). We're also happy to set it up with you — email us and we'll wire it together with your developer.

Once connected: orders appear in your Dock workspace under Orders, each gets a quick review before it's released to production (a standing step — orders skip it only if your account has auto-release switched on), and production/delivery costs are billed per your Dock account terms — see Billing & Pricing. How you take your customer's payment on your site stays entirely yours.

Every file uploaded through the widget is checked by Solopress's prepress system before the order can be released to production. Routine issues are corrected for you — the file is scaled to the product's spec and screen (RGB) colours are converted for print.

Anything the check flags as a blocking problem holds the order at the release step instead of it being printed, and we'll contact you about it; advisory warnings don't hold anything up. The check runs again by itself if the artwork is ever replaced, and the result is visible on the order in your Dock workspace.

Running your own prepress? The check is per account. Email us and we'll set yours to bypass: Dock then passes your artwork straight through without re-checking it, and responsibility for print-readiness stays with you. Left alone, the check stays on.

If your integration wants live order-status updates pushed to your server, set a Webhook URL and generate a Webhook Secret in your Dock workspace under Settings → Webhooks. Dock then POSTs status events (such as in_production, sent with tracking, on_hold and cancelled — the integration guide lists the full set) to that URL, signing each payload with HMAC-SHA256 — verify the X-Soloflo-Signature header against the secret before trusting a request.

Channel note: Shopify merchants leave these fields empty — status updates reach Shopify automatically. WooCommerce merchants do use them, but the values come from the Dock plugin rather than your own code: copy the webhook URL shown in the plugin's settings into Dock, and paste the generated secret back into the plugin — the WooCommerce Guide walks through it. Only custom-site integrations point the URL at an endpoint they built themselves.

• The widget doesn't appear — check both lines of the snippet are present and unmodified, and that your page allows scripts from app.mydock.io.
• The product list is empty — your Dock catalogue has no active products yet.
• A red error box appears ("Invalid API key" / "Invalid tenant") — the tenant-id/api-key pair doesn't match your workspace's Settings values. Re-copy the snippet.
• Colours look wrong — check Settings → Branding in Dock, and remember page-level theme/accent-color attributes override it.

Stuck? Email soloflo@solopress.com with the address of the page the widget is on.