Developers
← All documentationContents ↓

Embedding DataViews, Wizards & the Conversation Widget

Add Simply360 DataViews, Data Wizards, and the AI Conversation Widget to any website with a single bootstrap script and data-* attributes.

Overview

Simply360 ships a single embed loader that lets you drop three different types of components onto any website with one <script> tag and per-element data-* attributes:

  • DataViews — Render an externally shared Data View as a list, table, calendar, map, or details panel directly in your page.
  • Data Wizards — Embed a published Data Wizard (registration form, intake survey, payment flow) so visitors complete it without leaving your site.
  • Conversation Widget — Add the AI chat panel and knowledge-base browser as either a floating popover or an inline section.

All three are powered by the same bootstrap, so you only ever need one script tag per page. The easiest way to get correct markup is to copy the generated snippet from each resource's sharing/embedding panel in the Simply360 dashboard (View Studio, Wizard Studio, or the Conversation Widget admin) — the snippets below show what those generators produce.

Step 1: Add the Bootstrap Script

Drop one script tag before </body> (or in <head>) on every page that should host a Simply360 component:

<script
  src="https://public.simply360.app/v2/bootstrap.js"
  async
  data-s360-bootstrap>
</script>

The bootstrap is small. It scans the page for components that need mounting and only fetches the larger per-component bundles (view.js, wizard.js, conversation.js) from the same origin, on demand. Snippets copied from the dashboard may include a ?v= cache-busting query and, for branded/white-label teams, a brand-specific host — keep whatever the dashboard generated.

Step 2: Add Component Markup

Embed a DataView

Add a div with data-s360-data-view wherever you want the view to render. You'll need:

  • The DataView's simplyId (shown in View Studio).
  • An active public access token for the view, created in View Studio's sharing panel. It goes in data-api-key.
  • The inject function matching the view type in data-inject: injectListDataView, injectTableDataView, injectCalendarDataView, injectMapDataView, or injectDetailsDataView.
<div
  class="s360-embed"
  data-s360-data-view
  data-view-id="VIEW-1234-ABCD"
  data-api-key="<public access token from View Studio>"
  data-inject="injectListDataView"
  data-s360-view-type="list">
</div>

Optional attributes: data-loading-icons (JSON array of icon ids for the loading animation), data-s360-presentation and data-s360-data-filter-state (JSON presentation/filter overrides), and data-details-record-simply-id (the record to show when using injectDetailsDataView). All three required attributes (data-view-id, data-api-key, data-inject) must be present or the mount fails with a console error.

Embed a Data Wizard

Use the data-wizard-component custom element. The wizard fetches its schema from Simply360 and renders the multi-step form inline. Wizards do not use embed tokens — the wizard must be published for public access in Wizard Studio, and the element carries the wizard and team identifiers:

<data-wizard-component
  data-wizard-id="WIZD-1234-ABCD"
  team-id="TEAM-1234-ABCD">
</data-wizard-component>

Optional attributes include data-wizard-step-simply-id (start at a specific step), data-record-simply-id (bind to an existing record), language, and utm-source / utm-medium / utm-campaign / utm-term / utm-content for attribution. Embedded wizards inherit the team's Style Kit unless overridden.

Embed the Conversation Widget

Two modes are supported. Popover (a floating button that opens a chat panel) is the default — the marker element itself stays empty and can be hidden:

<div
  data-s360-conversation
  data-token="<widget token from the Embedding page>"
  data-widget-id="CWDG-1234-ABCD"
  data-position="bottom-right"
  hidden>
</div>

Inline mode renders the chat panel directly inside the marker element — useful for support pages and dedicated help sections. Give the container an explicit size:

<div
  data-s360-conversation
  data-token="<widget token>"
  data-widget-id="CWDG-1234-ABCD"
  data-mode="inline"
  style="width: 100%; min-height: 400px; height: 600px;">
</div>

Widget tokens are minted on the Conversation Widget's Embedding page in the team admin. Supported attributes: data-position (bottom-right or bottom-left), data-mode (popover default, or inline), data-default-mode (articles, chat, or ticket), data-primary-color, and data-custom-loading-icon-array (JSON array of icon ids).

Imperative Initialization

If you can't add markup statically (e.g. you mount the widget after a user action), use the global JavaScript API. Once conversation.js is loaded, S360Conversation is available on window:

window.S360Conversation.init({
  token: 'widget-token-from-embedding-page',
  position: 'bottom-right',
  mode: 'popover',
  defaultMode: 'chat',
  // Optional theme overrides:
  primaryColor: '#4F46E5',
  theme: {
    borderRadius: '8px',
  },
});

For inline mode, pass a target selector or element (required in this mode):

window.S360Conversation.init({
  token: 'widget-token',
  mode: 'inline',
  target: '#help-panel',
});

Other supported options: instanceId (explicit id for multi-widget pages), apiBaseUrl (first-party proxy override), customLoadingIconArray, disableAiSemanticSearch, and theme fields primaryColor, textColor, backgroundColor, borderRadius, fontFamily, and fontSize.

Re-Scanning the DOM

If you inject component markup after page load (e.g. via React, Vue, or any SPA framework), call S360Embed.scan() to mount any new instances:

// After your framework adds new data-s360-* elements to the DOM:
window.S360Embed?.scan();

The bootstrap also installs a MutationObserver that auto-mounts added nodes, so manual scan() is rarely required — but the imperative API is there if you need deterministic timing. S360Embed.mount() is the awaitable variant.

Tokens vs. API Keys

Embed credentials are public access tokens scoped to a single resource: a DataView token only reads that view's shared data, and a conversation widget token only drives that widget. They are designed to appear in client-side HTML. Wizards use no token at all — publication status controls access. Never put a server-side API key (s360_live_) or session token in browser-served markup.

Multiple Components on One Page

One bootstrap script handles any number of embedded components:

<!-- Top of page: hero with featured events DataView -->
<div class="s360-embed" data-s360-data-view data-view-id="VIEW-EVNT-0001" data-api-key="..." data-inject="injectListDataView" data-s360-view-type="list"></div>

<!-- Mid-page: registration wizard -->
<data-wizard-component data-wizard-id="WIZD-REGS-0001" team-id="TEAM-1234-ABCD"></data-wizard-component>

<!-- Bottom: floating chat widget -->
<div data-s360-conversation data-token="..." data-widget-id="CWDG-0001-ABCD" hidden></div>

<!-- One bootstrap mounts all three -->
<script src="https://public.simply360.app/v2/bootstrap.js" async data-s360-bootstrap></script>

Theming & Branding

By default, embedded components inherit the source team's Style Kit. To override on a per-embed basis:

  • DataViews / Wizards — Configure presentation in the Studio; DataView embeds also accept a data-s360-presentation JSON override on the marker element.
  • Conversation Widget — Pass data-primary-color="#hex" on the marker, or pass primaryColor / theme to S360Conversation.init().
  • Custom CSS — The conversation widget resolves its primary color through CSS custom properties; set --s360c-host-primary on your host page to win over the widget-configured (--s360c-widget-primary) and team (--s360c-team-primary) colors.

Security Considerations

  • Treat embed tokens as semi-public. They're safer than API keys but still grant access to the resource they're scoped to. Revoke and re-issue them from the Studio when a partner relationship ends.
  • Don't reuse one token across many embed locations — it makes revocation an all-or-nothing decision.
  • Only share DataViews whose fields are all safe for public display; the embed serves exactly what the view exposes.

Troubleshooting

  • "[S360Embed] ... mount failed" in the console. Check that bootstrap.js loaded successfully (network tab) and that your page's CSP script-src allows the embed host (public.simply360.app, or your brand's public host).
  • The component never appears. Confirm the marker element is in the DOM when the bootstrap runs (or call S360Embed.scan() after injection), and that DataView markers carry all three required attributes.
  • Token rejected. Verify the token is still active in the Studio's sharing panel and that the resource is still shared publicly.
  • Wizard renders nothing. Confirm the wizard is published for public access and both data-wizard-id and team-id are set.
  • Style conflicts. Aggressive host-page CSS (e.g. !important rules on html/body or global resets) can leak into embedded components. Scope your styles tightly.
↑