Embedded SDK · The Embed Builder

The Embed Builder

The Embed Builder is a visual configurator built into the Voxify platform. You tune every option with real controls, preview the result live, and copy a ready-to-paste snippet — no need to learn the config schema by hand. It is the fastest path to a correct integration, and the reference this whole Configuration section mirrors.

Where to find it

Embed Builder — the form, organised into collapsible sections (Authentication, Project, Vocal, Music, Mastering, Tools, Layout, Theme).
Playground — a live editor that mounts your in-progress configuration so you can see exactly how each change looks before you ship.

Each Builder section is a page in this guide. The sections you see in the Builder map one-to-one to the Configuration pages in the left sidebar — in the same order. If you're configuring an option in the Builder and want the detail, jump to the matching page.

How it works

Adjust the controls. Toggle features, set your token endpoints, choose tools, pick a theme colour. Sections are collapsed by default — expand the ones you care about.
Watch the Playground. The live editor re-mounts as you change settings, so layout, theme, and tool choices are visible immediately.
Copy the snippet. The Builder generates the full integration code. Paste it into your page and swap in your own token endpoints.

Anatomy of the generated snippet

The snippet has three parts: a mount element, the SDK assets, and the create() call.

html

<!-- 1. Mount point -->
<div id="voxify-script-editor-root"></div>

<!-- 2. SDK assets (load once, ideally in <head>) -->
<link rel="stylesheet" href="https://cdn.voxify.studio/voxify-embedded.min.css">
<script src="https://cdn.voxify.studio/voxify-embedded.min.js"></script>

<!-- 3. Initialize -->
<script>
window.VoxifyStudioEditor.create({
  "target": "#voxify-script-editor-root",
  "auth": {
    "getToken": async (userId) => { /* fetch your token endpoint, return token */ },
    "refreshToken": async (expiredToken) => { /* fetch your refresh endpoint, return token */ }
  }
  // project, vocal, music, mastering, layout, tools, theme —
  // each appears here ONLY if you changed it from its default
})
  .then(editor => {
    window.voxifyEditor = editor;
    document.getElementById('voxify-script-editor-root')
      .addEventListener('voxify:change', e => console.log('creatives:', e.detail.creatives));
  });
</script>

target and auth are always present. Everything else is added only when you change it. See Editor handle & events for what the resolved editor gives you and how to listen for changes.

Lean by default

The Builder emits a minimal config: a setting only appears in the snippet when its value differs from the SDK default. That keeps your integration code short and makes it obvious at a glance what you actually customised.

Defaults are omitted. Leave a control untouched and its key never reaches the snippet.
Opt-out keys are inverted. A few settings are on by default (e.g. recommendation tags); their key is written only when you turn them off.
The schema is flat. Sections like project, vocal, layout, tools, and theme sit at the top level of the config object, as siblings of target and auth.

Live preview vs. the snippet you copy

The Playground mounts the same configuration, but swaps a few pieces so it can run inside the platform against a demo backend. When you copy the snippet, be aware these differ:

Authentication. The Playground uses a built-in demo token so you don't have to stand up a backend to try it. Your copied snippet points at your token endpoints — see Authentication.
Mount target. The Playground mounts into its own preview element; your snippet uses #voxify-script-editor-root (or whatever you choose).
Project identity. The Playground pins a fixed project id so reloads round-trip; your integration gets a fresh project per session unless you pass one.

Prefer to hand-write the config? You can. Every option in this section documents its exact embedConfig key and a code example, so you never have to open the Builder if you'd rather configure in code. The Builder just gets you there faster — and lets you preview before you ship.