NPM packages

Configure

To configure multiple instances, pass an instances array prop to SeekaProvider instead of the standard org, id, and publicKey root props.

Standard root props (org, id, publicKey) cannot be used when providing the instances prop. All instances must be provided via the instances array.

To get org, id, and key for each instance, visit API settings in the Seeka app. Make sure the correct organisation and brand is selected before copying the values.

React example

src/App.jsx
 

+ const seekaInstances = [
+     // Brand 1
+     {
+         "org": "", // Organisation ID
+         "id": "", // Instance ID
+         "key": "" // Public key
+     },
+     // Brand 2
+     {
+         "org": "", // Organisation ID
+         "id": "", // Instance ID
+         "key": "" // Public key
+     }
+     // More instances can be added (up to 20)
+ ]

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
 -    <SeekaProvider org={seekaOrgId} publicKey={seekaPublicKey} id={seekaInstanceId}>
-+    <SeekaProvider instances={seekaInstances}>
+      <App />
    </SeekaProvider>
  </React.StrictMode>
);

Svelte example

src/routes/ layout.svelte
 
 <script lang="ts">
+ const seekaInstances = [
+     // Brand 1
+     {
+         "org": "", // Organisation ID
+         "id": "", // Instance ID
+         "key": "" // Public key
+     },
+     // Brand 2
+     {
+         "org": "", // Organisation ID
+         "id": "", // Instance ID
+         "key": "" // Public key
+     }
+     // More instances can be added (up to 20)
+ ]

  const seekaConfig = {
-    orgId: '(organisation ID)',
-    instanceId: '(instance ID)',
-    publicKey: '(public key)',
+    instances: seekaInstances
  };
 </script>

 <div class="app">
	<Header />

	<main>
-     <SeekaProvider
-       org={seekaConfig.orgId}
-       id={seekaConfig.instanceId}
-       publicKey={seekaConfig.publicKey}
-     >
+     <SeekaProvider
+       instances={seekaConfig.instances}
+     >
      {@render children()}
     </SeekaProvider>
	</main>
 </div>

Configuring provider context

To set defaults like currency, country, and client info across all instances, pass a context prop to SeekaProvider alongside the instances prop. See React installation for full context options.

import { SeekaProvider, SeekaProviderConfigContext } from '@seeka-labs/converge-react';

const seekaContext: SeekaProviderConfigContext = {
    tracking: {
        defaults: {
            currencyCode: 'AUD',
            countryCode: 'AU',
        }
    },
    client: {
        ver: '1.0.0',
        type: 'yourplatformname'
    }
};

<SeekaProvider instances={seekaInstances} context={seekaContext}>
    <App />
</SeekaProvider>

Usage

See multi-instance usage for how to interact with the SDK after configuration.