How to initialize the Cord SDK in the browser
On each page load, the Cord SDK needs to be initialized with the user’s identity so Cord components can show the appropriate content. This is done by passing a client auth token to the Cord SDK. You can also pass configuration options to the initialization call to configure some of the SDK’s behavior.
💡 Cord components can safely be put on the page before initialization, but they'll show a default state until initialization is done.
You initialize Cord with a single call, though the details depend on if you’re using React or vanilla JavaScript.
import { CordProvider } from "@cord-sdk/react";
export const App = () => (
<CordProvider clientAuthToken="...">
<YourApp />
<CordComponents />
</CordProvider>
);
window.CordSDK.init({
client_auth_token: "...",
});
💡 It's fine to reinitialize the SDK while the page is running. If you only change the configuration options, those changes will be applied. If you change the client auth token, all components will rerender with the new identity.
The initialization call also takes a configuration object to customize the behavior of all cord components on the page.
optionaldefault: trueIf set to true, the annotations feature will be enabled. If set to false, the feature will be disabled.
optionalA function that will be called before telling the browser to navigate to a new URL. This is particularly useful for single-page applications where there is custom navigation logic.
The navigate function has three arguments: the URL being navigated to, the Cord location being navigated to, and information about who can see the object that was selected. If the function you pass returns true when called, the default navigation behavior will be skipped.
For example:
function navigate(url, location, identity) {
// Change the URL to the new URL
history.pushState(null, null, url);
// Change to a different org if the object isn't visible to the current org
if (identity.orgID !== myUser.orgID) {
myUser.setOrgID(identity.orgID);
}
// Change app's view to load the appropriate information
myApp.setLocation(location);
// Don't have Cord navigate to a new page
return true;
}
optionaldefault: falseIf true, blurred screenshots will be taken in addition to unblurred screenshots. This can be used to hide sensitive information on the page from people who have access to the conversations but not all of the page contents.
When the blurred screenshot is shown is controlled by the option below this one.
optionaldefault: "outside_page"When set to "outside_page", unblurred screenshots will be shown on the page they’re taken on, but blurred screenshots will be shown elsewhere. When set to "everywhere", blurred screenshots will always be shown, never unblurred screenshots. Note: The user who created a screenshot will always see an unblurred screenshot, in all locations, no matter the setting of this option.
This option does nothing if you aren’t also blurring screenshots using the option above this one.
optionalA configuration object that controls behavior for all threads that appear on the page. The available sub-options are listed below.
optionalA list of user IDs that will be subscribed to every new thread that is created during this SDK session.
optionaldefault: trueIf set to true, the annotations feature will be enabled. If set to false, the feature will be disabled.
optionalA function that will be called before telling the browser to navigate to a new URL. This is particularly useful for single-page applications where there is custom navigation logic.
The navigate function has three arguments: the URL being navigated to, the Cord location being navigated to, and information about who can see the object that was selected. If the function you pass returns true when called, the default navigation behavior will be skipped.
For example:
function navigate(url, location, identity) {
// Change the URL to the new URL
history.pushState(null, null, url);
// Change to a different org if the object isn't visible to the current org
if (identity.orgID !== myUser.orgID) {
myUser.setOrgID(identity.orgID);
}
// Change app's view to load the appropriate information
myApp.setLocation(location);
// Don't have Cord navigate to a new page
return true;
}
optionaldefault: falseIf true, blurred screenshots will be taken in addition to unblurred screenshots. This can be used to hide sensitive information on the page from people who have access to the conversations but not all of the page contents.
When the blurred screenshot is shown is controlled by the option below this one.
optionaldefault: "outside_page"When set to "outside_page", unblurred screenshots will be shown on the page they’re taken on, but blurred screenshots will be shown elsewhere. When set to "everywhere", blurred screenshots will always be shown, never unblurred screenshots. Note: The user who created a screenshot will always see an unblurred screenshot, in all locations, no matter the setting of this option.
This option does nothing if you aren’t also blurring screenshots using the option above this one.
optionalA configuration object that controls behavior for all threads that appear on the page. The available sub-options are listed below.
optionalA list of user IDs that will be subscribed to every new thread that is created during this SDK session.
On this page