Embedding visualisations

The interactive visualisation endpoint at /visualisation/interactive/{id}/{order_index}/{bin_index} returns a complete HTML page by default. If you want to embed only parts of it, for example to drop our footer or to use your own CSS, pass ?fragments=true. The endpoint then returns a JSON object whose values are HTML snippets, keyed by section name. You wire them up in your own page.

When to use it

• You want to embed the 3D visualisation inside a page that already has its own styling (Bootstrap, Tailwind, plain CSS).
• You want to show the plot only, without the "Powered by Optioryx" footer.
• You want to show only specific tables (Items, Metrics) without the plot, or vice versa.
• You want to render the plot in an iframe with custom layout.

If you just want the full standalone page (the existing behaviour), do not pass fragments; it is false by default.

How to use it

curl -X GET 'https://optiapp.api.optioryx.com/visualisation/interactive/<ID>/0/0?fragments=true' \
  -H 'x-api-key: <YOUR_KEY>'

The response is application/json with eight string-valued keys:

Key	Contents
meta	<meta> tags for charset and viewport.
cdn_assets	<link> / <script> tags for Bootstrap and Plotly from public CDNs.
custom_styles	Inline <style> block for the layout (body, container, table, footer).
custom_scripts	Inline <script> block with highlight3DObject / highlightAll (hover-highlight handlers used by the Items table).
items_table	The Items table (heading + table). Item rows wire mouse hover to highlight3DObject.
metrics_table	The Metrics table (Bin Used / Number of items / Fill rate).
plot	The <div id="bin-plot"> element and its inline Plotly.newPlot(...) initialisation script.
footer	The <footer> with the "Powered by" Optioryx logo.

Dependencies between fragments

The fragments are designed to be mixed and matched, but a few depend on others to render or behave correctly. If you cherry-pick, include the dependencies too.

Fragment	Requires
items_table	custom_scripts (otherwise the hover-highlight does nothing, no error, no highlight).
plot	cdn_assets (Plotly is loaded from the CDN there).
Any visual element	cdn_assets (Bootstrap CSS) and custom_styles for the expected look.

If you bring your own Bootstrap and your own styles, you can skip cdn_assets and custom_styles and use only plot, items_table, metrics_table, with the caveat that the inline classes (table table-bordered table-hover, col-md-5, col-md-7, etc.) assume Bootstrap 5 is present somewhere on the page.

Examples

Drop only the footer

Stitch all fragments except footer into your page:

<!DOCTYPE html>
<html>
<head>
  {{meta}}
  {{cdn_assets}}
  {{custom_styles}}
  {{custom_scripts}}
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        {{items_table}}
        {{metrics_table}}
      </div>
      {{plot}}
    </div>
  </div>
</body>
</html>

Plot only (iframe-friendly)

<!DOCTYPE html>
<html>
<head>
  {{meta}}
  {{cdn_assets}}
</head>
<body style="margin:0">
  {{plot}}
</body>
</html>

Bring your own CSS

Skip custom_styles entirely; supply your own:

<head>
  {{meta}}
  {{cdn_assets}}
  {{custom_scripts}}
  <link rel="stylesheet" href="/my-styles.css">
</head>
<body>
  ... {{items_table}} {{metrics_table}} {{plot}} ...
</body>

Compatibility

fragments=true is opt-in. Existing integrations that fetch the endpoint without the parameter receive the full HTML page exactly as before.