Install on a custom site

Vanilla HTML / React / Vue / Next.js / Astro — the widget runs anywhere.

Install on a custom site

The widget is plain ES5 — no framework, no build step. It works on any site that can load a <script>.

# Vanilla HTML

Paste before </body>:

<script src="https://cdn.skryx.io/widget.js"
        data-key="pk_live_YOURKEY"
        data-target="#site-search"
        defer></script>

Replace #site-search with the CSS selector of your existing search input. Drop the attribute to let the widget render its own input.

# React / Next.js

In app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):

import Script from 'next/script';

export default function RootLayout({ children }) {
    return (
        <html>
            <body>
                {children}
                <Script src="https://cdn.skryx.io/widget.js"
                        data-key="pk_live_YOURKEY"
                        data-target="#site-search"
                        strategy="lazyOnload" />
            </body>
        </html>
    );
}

strategy="lazyOnload" matches the widget's defer-friendly init — it auto-attaches once the script + DOM are both ready.

# Vue 3

In App.vue or main.ts:

onMounted(() => {
    const s = document.createElement('script');
    s.src = 'https://cdn.skryx.io/widget.js';
    s.setAttribute('data-key', 'pk_live_YOURKEY');
    s.setAttribute('data-target', '#site-search');
    s.defer = true;
    document.body.appendChild(s);
});

# Astro

In src/layouts/Layout.astro, before </body>:

<script is:inline src="https://cdn.skryx.io/widget.js"
        data-key="pk_live_YOURKEY"
        data-target="#site-search" defer></script>

is:inline keeps Astro from processing the tag and tree-shaking it.

# Programmatic instantiation

Need to instantiate multiple widgets on the same page (rare), or initialise after the user does something? Use the class constructor:

const widget = new window.SkryxWidgetClass({
    key: 'pk_live_YOURKEY',
    target: '#my-other-input',
});

// Later — re-attach with new settings:
widget.destroy();
const widget2 = new window.SkryxWidgetClass({ ... });

The auto-init window.SkryxWidget is always the FIRST instance bootstrapped from the script tag.

# Public API on window.SkryxWidget

window.SkryxWidget.open();      // force-open the dropdown for current input value
window.SkryxWidget.close();     // hide it
window.SkryxWidget.reload();    // re-fetch config from server (after dashboard edits)
window.SkryxWidget.destroy();   // detach listeners + remove DOM

# Single-page app navigation

The widget auto-resyncs on scroll + resize, but if your SPA tears down + remounts the search input on route change, call widget.destroy() and re-init after navigation.

# CSP

Add to your Content-Security-Policy:

script-src 'self' https://cdn.skryx.io;
connect-src 'self' https://api.skryx.io https://track.skryx.io;
img-src 'self' https://*.b-cdn.net data:;  /* + your product image CDN */

The widget renders inside a Shadow DOM — no inline styles to whitelist.

esc