Embedding Guide

Before you start

Embedding only works when your account and domain are configured.

• An active subscription (or trial) on your SalesCFG account
• At least one published configurator
• Your website hostname added under allowed domains in account settings
• Your public key — copy it from Dashboard → Embed script

Get your snippet

The fastest path is the dashboard embed page: it generates a ready-to-paste snippet per configurator, with tabs for Vanilla JS, React, Next.js, Vue/Nuxt, Svelte, and WordPress.

Install the script

Paste this where the configurator should appear. Replace the placeholder values with your public key and configurator publicId.

<!-- SalesCFG Embed (Vanilla JS) -->
<div id="salescfg-root-YOUR_PUBLIC_ID"></div>
<script
  src="https://demo.salescfg.com/embed/script.js"
  data-public-key="YOUR_PUBLIC_KEY"
  data-configurator-id="YOUR_PUBLIC_ID"
  data-container-id="salescfg-root-YOUR_PUBLIC_ID">
</script>

Script attributes

The embed loader reads configuration from data attributes on the script tag:

Framework examples

All frameworks load the same /embed/script.js file. The dashboard embed page provides copy-ready examples that inject the script on mount and clean up on unmount.

• Vanilla HTML
• React / Next.js (client component)
• Vue 3 / Nuxt 3
• Svelte
• WordPress shortcode pattern

Container & layout

Style the mount element to control width and spacing. The configurator fills the container width by default.

<div id="salescfg-root-YOUR_PUBLIC_ID"
     style="max-width: 1200px; margin: 0 auto; min-height: 480px;">
</div>

Testing checklist

1. Configurator loads without console errors
2. Options, dependencies, and incompatibilities behave correctly
3. Price total updates when selections change
4. Quote form submits and you receive notification email
5. Test on mobile and in your production domain (not only localhost)

Troubleshooting

• Blank embed area

  Verify public key, configurator id, and container id match the snippet.

• Domain not allowed

  Add your site hostname to allowed domains (Account settings). Include apex and www if both are used.

• Subscription errors

  Confirm billing is active; expired subscriptions block public API access.

• Script loads twice

  In SPAs, guard against duplicate script injection on re-render (see framework examples in the dashboard).