Embed Kbee on your page

Last updated by Sandeep Dinesh 2 months ago

Using the KBee Embedded SDK, you can embed Kbee on your page. You can even embed Kbee behind your own login!

Get your API Key

From your Kbee dashboard, copy your API Key. We will use it in the next step.

Whitelist Domain Origin

Add the website origin of the page or pages you will be embedding Kbee into. For security reasons, the Kbee SDK will not work on pages not included here.

Install Kbee Embedded

On your website, add the following script tag to your page’s <HEAD> tag:


<script src="https://cdn.jsdelivr.net/gh/kbee-app/embedded@latest/dist/kbee-embedded.js"></script>

You can now select a target to render the Kbee content into. The Kbee SDK will automatically authenticate your users if you are using password protection.


Kbee.render({
  target: '#kbee-content',
  spaceUrl: 'https://yourspace.kbee.app',
  apiKey: '<YOUR-API-KEY>'
})

Note: You can find the full documentation on the GitHub page

Sample HTML


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title> YOUR TITLE </title>
    <script src="https://cdn.jsdelivr.net/gh/kbee-app/embedded@latest/dist/kbee-embedded.js"></script>
  </head>
  <body>
    <div id="kbee-content" style="width:100vw;height:100vh"></div>
  <script>
    Kbee.render({
      target: '#kbee-content',
      spaceUrl: 'https://yourspace.kbee.app',
      apiKey: '<YOUR-API-KEY>'
    })
  </script>
  </body>
</html>

This sample should get you up and running quickly!

Removing the Logo

When running in embedded mode, you may not want to display your logo inside Kbee. For example, you may already have your logo on your page.

To remove the logo from the embedded mode, go to Settings → Security → Hide Logo on Embedded Pages

Click save to update your pages.

Require Page to be Embedded

You can also require that users only access your space in the embedded mode. Yo do this, switch on “Require Page to be Embedded”

Security Considerations

Embedded mode lets users access your space even if access to your space is restricted. Anyone who can access the embedded page can access your space. This is very convenient when you want to lock access behind your own login, but there are some things to be aware of.

Google Docs

If your space only consists of Google Docs, everything will work as expected in embedded mode.