1. Functions

CloudSDK

Version:
TypeFunction
Import path@sitecore-cloudsdk/core/browser

Initializes the Cloud SDK and any SDK packages of your choice.

Important

Initialize SDK packages before running any functions in the package modules.

Signature

export function CloudSDK(
  settings: BrowserSettings
): CloudSDKBrowserInitializer

Parameters

NameTypeDescription
settingsBrowserSettingsRequired.

Details about your SitecoreAI instance and cookie settings.

BrowserSettings properties

NameTypeDescriptionValue
sitecoreEdgeContextIdstringRequired.Context ID."3axQRoRznWUqHR8B2RSbdo"
siteNamestringRequired.Site name."myRetailSite"
cookieDomainstringOptional.The top-level domain of your app. The cookie domain ensures that the Cloud SDK stores cookies in the web browser as first-party cookies.Default: your domain.".myretailsite.com"".beta.myretailsite.com""localhost"
cookieExpiryDaysintegerOptional.The number of days before cookies expire.For example, set to 1 for cookies to expire in 1 day.If unset, cookies expire according to the Max-Age set by the web browser.365
cookiePathstringOptional.A URL path that must exist in the requested URL in order to send cookies.Default: "/"."/"
enableBrowserCookiebooleanOptional.Whether to set cookies from the browser side.If using only the browser modules of packages, set to true.If using both the browser and the server modules of packages, set either enableBrowserCookie or enableServerCookie to true, and set the other to false.Default: false.true

Return value

Returns an instance of CloudSDKBrowserInitializer.

Examples

Example 26. Running the CloudSDK function

We recommend you initialize the SDK and its packages in an Effect Hook in a component, such as components/CloudSDK.tsx. Then, add the component to layout.tsx so that your entire app has access to other SDK functions.

Here's an example CloudSDK.tsx script showing how to initialize the SDK and its packages.

Important

Before initializing SDK packages, first install them and import their modules.

See install and initialize the Cloud SDK and the reference documentation for installation and initialization code for all Cloud SDK packages and modules.

"use client";
import { useEffect } from "react";
// Import SDK modules ->
import { CloudSDK } from "@sitecore-cloudsdk/core/browser";
import "@sitecore-cloudsdk/events/browser";
import "@sitecore-cloudsdk/personalize/browser";
import "@sitecore-cloudsdk/search/browser";
// <- Import SDK modules

export default function CloudSDKComponent() {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: "<YOUR_SITECORE_EDGE_CONTEXT_ID>",
      siteName: "<YOUR_SITE_NAME>",
      enableBrowserCookie: true
    })
     .addEvents() // Initialize the events package
     .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: { language: 'en' } }) // Initialize the personalize package
     .addSearch() // Initialize the search package
     .initialize();  // Run the initialization logic and set cookies
  }, []);

  return null;
};

:::

Example 27. Customizing initialization

JSS Next.js apps already initialize the Cloud SDK core and events packages on the browser side, in Bootstrap.tsx, with no coding required. If this default implementation doesn't suit your application requirements, you can customize it by, for example, importing more SDK modules:

import { useEffect } from 'react';
import { SitecorePageProps } from 'lib/page-props';
// Import SDK modules ->
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import '@sitecore-cloudsdk/events/browser';
import '@sitecore-cloudsdk/personalize/browser';
import '@sitecore-cloudsdk/search/browser';
// <- Import SDK modules
import config from 'temp/config';

const CloudSDKComponent = (props: SitecorePageProps): JSX.Element | null => {
  useEffect(() => {
    CloudSDK({
      sitecoreEdgeContextId: config.sitecoreEdgeContextId,
      siteName: props.site?.name || config.sitecoreSiteName,
      cookieDomain: window.location.hostname.replace(/^www\./, ''),
      enableBrowserCookie: true
    })
      .addEvents() // Initialize the events package
      .addPersonalize({ enablePersonalizeCookie: true, webPersonalization: true }) // Initialize the personalize package
      .addSearch() // Initialize the search package
      .initialize(); // Run the initialization logic and set cookies
  }, [props.site]);

  return null;
};

export default CloudSDKComponent;

:::

This script initializes the following Cloud SDK packages:

This script also enables Sitecore Personalize web personalizations. If you don't want to enable web personalizations, remove webPersonalization: true.

If you have suggestions for improving this article, let us know!