Skip to main content

Getting started

The SDK can be embedded into any html page usign the <script> tag.


Please see the multiple instances of the SDK guide for implementation of multiple SDK instances on the same HTML page.

<script src=""></script>

document.getElementById is used to find a predefined HTML Element. Once found the SDK can now insert itself into the page at that position.


The page embedding the SDK must have an HTML element with the same unique ID defined in the attribute targetDomId within the settings.

Therfore this element 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>
var settings = {    targetDomId: "wizeupSDK", // Setting up SDK HTML element ID    // ...    };

Place the ID element as preferred on your page and adjust styling and positioning accordingly. Consider however that certain UI elements require enough space to be displayed correctly.

Set your preferrences#

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

html page embedding the SDK
<!-- single-instance.html shows how to embed the SDK  -->
<!DOCTYPE html><html lang="en">    <head>        <meta charset="utf-8" />        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Single-instance</title>        <style>            /* Add custom style here, check at Customisation > gnpm ruStyle and layout */        </style>    </head>    <body>        <div id="wizeupSDK"></div>
        <script src=""></script>
        <script type="module">            window.onload = function () {                var settings = {                    targetDomId: "wizeupSDK", // Setting up instance ID                    apiTarget: "custom1",                    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: "700px",                    height: "900px",                };
                window.wizeupSDK([]).init(settings);            };        </script>    </body></html>

The disable: [] allows for certain parts of the SDK to be disabled. This can be seen in the component list.