Skip to main content

Multiple instances

Multiple instances of the SDK can be embedded into any html page.

info

Multiple instances feature is supported by the SDK version 1.3.0 or newer.

<script src="https://sdk.wizeup.world/sdk/v1.6.6/wizeup.js"></script>

document.getElementById is used to find the predefined HTML Element for each instance. Once found, the SDK can now insert itself into the page.

important

The page embedding the SDK must have an HTML element for each SDK instance. This element will bear a unique ID defined in the attribute targetDomId within the settings.

Therfore those elements should exist in your page. If it does not, the SDK will not know where to attach itself. It will therefore not showup on the page.

<div id="wizeupSDK"></div><div id="wizeupSDK2"></div>

Set your preferrences by instance#

There are default settings however many customers opt for their own personal configuration. Call window.wizeupSDK().initAll([settings, settings2]) where settings is an object with your preferences. The example below shows this in action.

HTML page embedding the SDK with two instances
<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8" />        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Multi-instance</title>    </head>    <body>        <div id="wizeupSDK"></div>        <div id="wizeupSDK2"></div>
        <script src="https://sdk.wizeup.world/sdk/v1.6.6/wizeup.js"></script>
        <script type="module">            window.onload = function () {                var settings = {                    targetDomId: "wizeupSDK", // Setting up instance ID                    cssFile: "wizeup.css",                    numberOfResults: 5,                    disable: [], // ["SEARCH", "QUERY_TITLE"] etc.                    start: "SUBJECT_CARD",                    readingLevel: ["1","2","3"] // takes values between 1 and 5                    pinnedOnly: false,                    language: "en",                    enableRouter: false,                    embeddable: false,                    iframeWindow: false,                    width: "400px",                    height: "900px",                };
                var settings2 = {                    ...settings, // copy settings from settings                    targetDomId: "wizeupSDK2", // Instance ID for the second instance                    width: "800px",                    height: "900px",                    language: "nl",                };
                window.wizeupSDK().initAll([settings, settings2]);            };        </script>    </body></html>

With this setup, the SDK launches two instances of the SDK. These will be placed where the associated div has been placed.

<div id="wizeupSDK"></div><div id="wizeupSDK2"></div>

Screenshot example showing multiple instances.

multiple instances