search

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.

hashtag
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>

hashtag
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.

hashtag
Step 3: Save and Deploy

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

hashtag
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.

If you encounter any issues or have further questions, please refer to the Developer Docsarrow-up-right or you can contact us at [email protected]

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

Last updated