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 instanceThere 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.
<!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.