Embed Kbee on your pageย 

Last updated by Sai Arora a month 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.ย 
ย 
ย 
Image 1 ย 

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.ย 
ย 
Image 2 ย 
ย 

Install Kbee Embedded (Simple)ย 

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>'
})

Advanced Installationย 

ย 
You can also use NPM to install the package. This is the recommended method if you are using a modern build system for your website.ย 
ย 
First, install the package:ย 
ย 

npm i @kbee-app/embedded --save

ย 
Then you can use the packageย 
ย 

const renderKbee = require('@kbee-app/embedded')
renderKbee({
 
target: '#kbee-content',
 
spaceUrl: 'http://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 ย 
ย 
Image 3 ย 
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โ€ย 
Image 4 ย 

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

Other content (PDFs, Slides, Sheets, etc)ย 

Non Docs content requires the user to have access to the underlying item in Google Drive. If you know who the users or groups accessing your space will be, you canย add them in Kbee ย or Google Drive.ย 
ย 
If you do not know ahead of time who your users will be, the best choice is to turn on link sharing on the space. This will allow anyone to view the content without needing to be explicitly shared on Google Drive.ย 
ย 
However, this means that folks who guess your Google Drive folderโ€™s ID will be able to view your content. Guessing this ID is not easy, but it may be possible.ย 
ย 

React Supportย 

In order to use this library with React, the render function call must be used inside aย  useEffectย  hook. You also need to use theย  bypassDocumentLoadEventย  in order for things to work.ย 
ย 

import { useEffect } from 'react'
import Kbee from '@kbee-app/embedded'

export default function Test() {
 useEffect(() => {
   Kbee({
     
target: '#kbee-content',
     
spaceUrl: 'http://yourspace.kbee.app',
     
apiKey: '<YOUR-API-KEY>',
     
bypassDocumentLoadEvent: true
   })
 }, [])
 
return <div id='kbee-content' style={{ width: '100vw', height: '100vh' }} />
}

ย 

Vue Supportย 

In order to use this library with Vue, the render function should be called atย  mounted . You also need to use theย  bypassDocumentLoadEventย  in order for things to work.ย 
ย 

<template>
<
div id="kbee-content" style="height: 100vh; width: 100vw;" />
</
template>

<script>
import Kbee from "@kbee-app/embedded";

export default {
name: "KbeeContent",
mounted() {
  Kbee({
   
target: "#kbee-content",
   
spaceUrl: 'http://yourspace.kbee.app',
   
apiKey: '<YOUR-API-KEY>',
   
bypassDocumentLoadEvent: true,
  });
},
};
</
script>

ย 
ย 
Refreshed On: Oct 06, 2022 02:41:38 UTC+00:00