How to setup SDK?

PreviousHow to create commands using Editor Extension?NextHow to create Product Tours/Flows?

Last updated 4 months ago

How to setup SDK?

Welcome to the integration guide for the Beacon SDK. This document will walk you through the process of connecting the Beacon SDK to your website.

Integrate the Beacon SDK into your website by following these steps or simply use "npm i @beacon.li/bar" for seamless implementation.

Step 1: Copy the Script

Copy the following script and paste it into the <head> of every page you wish to have beacon bar.

<script>
(function(b,e,a,c,o,n) {b[c] = {orgId:n, open:()=>{b[c].opened=true}};
  var s = e.createElement(a);
  s.src='https://cdn.beacon.li/sdk/latest.js';s.async=true;s.type='module';
  var d = e.createElement(o);
  d.id='beacon-user';
  e.body.appendChild(d);
  e.head.appendChild(s);
})(window, document, 'script', 'BeaconBar', 'div','US6P8B');
</script>

Step 2: Replace YOUR_ORG_ID

On the Beacon dashboard's overview page, you can find organization IDs for both the sandbox and live environments. Choose your preferred environment and replace "YOUR_ORG_ID" with the corresponding ID.

Step 3: Save and Deploy

Save your changes and deploy your website with the updated code.

Testing:

To ensure successful integration, visit your website in a browser and use the keyboard shortcut "Command + K" (for Mac) or "CTRL + K" (for Windows). The command palette will appear, as illustrated in the screenshot below.

If you already have a function assigned to "Command + K" (for Mac) or "CTRL + K" (for Windows) shortcut, you can modify the Beacon shortcut in the Beacon dashboard. To make changes, navigate to Config > Bar Config > Bar Shortcuts. For both Mac and Windows, click 'x' to cancel the current shortcut and enter your preferred shortcut.

PreviousHow to create commands using Editor Extension?NextHow to create Product Tours/Flows?

Last updated 4 months ago