Link copied to clipboard!

Migrating from Embedded Cord

If you’ve previously used embedded Cord, this will explain what you need to do to move to the new components API.

Note: If you want to keep your threads when upgrading to the SDK, please get in touch. We will need to migrate all the threads' data to the new SDK, and we can do this for you in minutes.

Basics

  1. Update your script tag’s src property to https://app.cord.com/sdk/v1/sdk.latest.js.

  2. Change your init call from window.cord.init() to window.CordSDK.init() and rename the session_token property in that call to client_auth_token.

  3. Add a <cord-sidebar /> tag to your page somewhere.

The new init() call takes the same token as the previous one, so no server-side changes are needed.

Before:

<script src="https://app.cord.com/embed/latest.js"></script>
<script>
  window.cord.init({
    session_token: "<CLIENT_AUTH_TOKEN>",
  });
</script>

After:

<script src="https://app.cord.com/sdk/v1/sdk.latest.js"></script>
<script>
  window.CordSDK.init({
    client_auth_token: "<CLIENT_AUTH_TOKEN>",
  });
</script>
<cord-sidebar />

Embedded launcher

If you’re using the embedded launcher, replace it with a cord-sidebar-launcher component. Most of the existing customization options are supported, though under different names in some cases. See the component documentation for all the details.

Before:

<script>
  window.cord.init({
    session_token: "<CLIENT_AUTH_TOKEN>",
    launcher: "embedded",
  });
</script>

<div
  data-cord-launcher="true"
  data-cord-label="Collaborate"
  data-cord-badge-style="badged"
/>

After:

<script>
  window.CordSDK.init({
    client_auth_token: "<CLIENT_AUTH_TOKEN>",
  });
</script>

<cord-sidebar show-launcher="false" />

<cord-sidebar-launcher label="Collaborate" inbox-badge-style="badge" />

Events

Events are now fired on the relevant component instead of the document and the names have changed. Add event listeners to the components using addEventListener() to receive the events.

Old event Component New event
cord:sidebar.open cord-sidebar open
cord:sidebar.close cord-sidebar close
cord:sidebar.resize None None
cord:launcher.render None None
cord:launcher.click cord-sidebar-launcher click

If you are using events that don’t have a new equivalent, let us know.

Before:

document.addEventListener("cord:sidebar.open", (e) => {
  console.log("cord sidebar is open");
});

After:

<cord-sidebar id="sidebar" />
<script>
  document.getElementById("sidebar").addEventListener("open", (e) => {
    console.log("cord sidebar is open");
  });
</script>

shouldShowCordSidebar

The shouldShowCordSidebar callback is no longer supported. Add or remove the cord-sidebar tag to control whether the sidebar appears on a given page.

Before:

window.cord.init({
  session_token: "<CLIENT_AUTH_TOKEN>",
  shouldShowCordSidebar: (url) => !url.includes("/login/"),
});

After:

window.CordSDK.init({
  client_auth_token: "<CLIENT_AUTH_TOKEN>",
});
if (!window.location.pathname.includes("/login/")) {
  const sidebar = document.createElement("cord-sidebar");
  document.body.appendChild(sidebar);
}