7.3 Install SDK (JavaScript Embedding)

After creating a site, you need to embed a JavaScript snippet (SDK) into your website to enable:

Website analytics
AI customer service
FAQ display
Knowledge base integration

Installing the SDK is the most important step of using the Website Assistant, but also the simplest: just add a <script> tag—no backend changes required.

1. Get the SDK Code

In the Pop admin panel, go to:

Website Assistant → Site Management → Select a Site → Installation Guide / SDK Code

You will see code similar to:

<script
  src="https://connect.popllm.com/sdk.js"
  data-site-key="YOUR_SITE_KEY"
  data-api-url="https://api.popllm.com"
  data-lang="zh-CN"
  data-theme="auto"
></script>

Where:

src: SDK hosting URL (provided by Pop)
data-site-key: your unique SiteKey
data-api-url: API endpoint
data-lang: language (zh-CN, en)
data-theme: theme (light, dark, auto)

Copy and paste the full snippet into your website.

Do not modify src or data-site-key unless necessary.

2. Where to Place the Script?

✅ Recommended: Before `</body>`

<html>
  <head>
    <!-- Your CSS, JS -->
  </head>
  <body>
    <!-- Your content -->

    <!-- Pop SDK -->
    <script
      src="https://connect.popllm.com/sdk.js"
      data-site-key="YOUR_SITE_KEY"
      data-lang="zh-CN"
      data-theme="auto"
    ></script>
  </body>
</html>

Advantages:

Does not block main content rendering
SDK initializes after page load

Alternative: Inside `<head>` with `defer`

<head>
  <script
    src="https://connect.popllm.com/sdk.js"
    data-site-key="YOUR_SITE_KEY"
    data-lang="zh-CN"
    data-theme="auto"
    defer
  ></script>
</head>

Useful when the assistant button must load early.

3. Installation in SPA (React / Vue / Angular)

Even for SPAs, you can embed the <script> normally:

Template‑based apps: add in index.html
SSR frameworks (Next.js / Nuxt): add in _document, app, or root layout

Pop SDK monitors route changes automatically—no manual tracking needed.

4. Test vs Production Environments

Recommendation:

Create separate site entries for staging and production
Use different siteKeys

<!-- Production -->
<script
  src="https://connect.popllm.com/sdk.js"
  data-site-key="PROD_KEY"
></script>

<!-- Staging -->
<script
  src="https://connect.popllm.com/sdk.js"
  data-site-key="STAGE_KEY"
></script>

This keeps data isolated.

5. Troubleshooting Installation Issues

If you see no visitors, analytics, or assistant UI:

1. Check browser console

Look for:

Blocked by client
sdk.js 404
CORS errors

Ad blockers can block scripts—try turning them off.

2. Domain mismatch

Ensure access domain matches Pop site settings.

Local development requires using a staging site.

3. Wrong siteKey

Copy again from backend if unsure.

4. Browser cache

Force refresh or add a query parameter:

<script src="https://connect.popllm.com/sdk.js?v=1"></script>

6. Debugging Locally

You can run SDK on localhost using a staging siteKey.

You’ll see visitor logs from localhost in Pop.

7. Summary

Create a site in Pop and copy the SDK snippet
Paste the <script> into your website (preferably before </body>)
Reload your site and visit a few pages
See real-time analytics in Pop
If assistant is enabled, the chat widget appears automatically