@sitecore-cloudsdk/core/browser

CloudSDK

Version:

Type	Function
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

Name	Type	Description
`settings`	`BrowserSettings`	Required. Details about your SitecoreAI instance and cookie settings.

Name

Type

Description

settings

BrowserSettings

Required.

Details about your SitecoreAI instance and cookie settings.

`BrowserSettings` properties

Name	Type	Description	Value
`sitecoreEdgeContextId`	`string`	Required. Context ID.	`"3axQRoRznWUqHR8B2RSbdo"`
`siteName`	`string`	Required. Site name.	`"myRetailSite"`
`cookieDomain`	`string`	Optional. 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"`
`cookieExpiryDays`	`integer`	Optional. 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`
`cookiePath`	`string`	Optional. A URL path that must exist in the requested URL in order to send cookies. Default: `"/"`.	`"/"`
`enableBrowserCookie`	`boolean`	Optional. 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

Next.js

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

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:

addEvents initializes the events package.
addPersonalize initializes the personalize package.
addSearch initializes the search package.

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!

CloudSDK

Signature

Parameters

BrowserSettings properties

Return value

Examples

Next.js

JSS Next.js

`BrowserSettings` properties