Embedding VOL

@vol/embed is a dependency-free script (~8 kB gzipped) that adds VOL to any page. It offers three placements, all of which talk to the API directly with your key:

Placement	Call	Result
Inline	`Vol("inline", {...})`	A chat rendered inside an element of your page
Floating button	`Vol("floatingButton", {...})`	A launcher in the corner that opens the chat in a modal
Web Component	`<vol-chat …>`	A custom element you place and style like any tag

1. Install the snippet

Paste before </body>. The stub queues commands until the script loads, so you can call Vol(...) immediately:

<script>
  (function (w, d, src) {
    w.Vol = w.Vol || function () { (w.Vol.q = w.Vol.q || []).push(arguments); };
    var s = d.createElement("script"); s.async = true; s.src = src; d.head.appendChild(s);
  })(window, document, "https://vol.example.com/embed/embed.js");

  Vol("init", { apiKey: "vol_live_…", case: "papers" });
</script>

baseUrl defaults to <script origin>/api; set it if your API lives elsewhere.

2. Choose a placement

<div id="vol-chat" style="max-width: 720px"></div>
<script>
  Vol("inline", { elementOrSelector: "#vol-chat", height: "600px", title: "Ask our research library" });
</script>

<script>
  Vol("floatingButton", { buttonText: "Ask VOL", position: "bottom-right", buttonColor: "#6349ea" });
</script>

<script type="module" src="https://vol.example.com/embed/embed.mjs"></script>
<vol-chat case="cordis" api-key="vol_live_…" heading="EU research assistant" style="height: 560px"></vol-chat>

3. React to events

Vol("on", "vol:citation", (e) => {
  console.log(e.detail.citation.nodeIndex);
  e.preventDefault(); // stop the default "open in the VOL map" behaviour
});
Vol("on", "vol:answer", (e) => analytics.track("vol_answer", { citations: e.detail.citations.length }));

Full option and event reference: Embed.