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

```javascript
<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.

<figure><img src="/files/GQeXf0WF0YNr2IrVOZaL" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/m2cBf4HDfhhve7vyp2tV" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/FerOliK27G6LJr2HVVzm" alt=""><figcaption></figcaption></figure>

If you encounter any issues or have further questions, please refer to the [Developer Docs](https://api.beacon.li/) or you can contact us at <support@beacon.li>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.beacon.li/how-to-setup-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
