diff --git a/docs/embedded-uploader/embedded-uploader.md b/docs/embedded-uploader/embedded-uploader.md new file mode 100644 index 0000000..e839134 --- /dev/null +++ b/docs/embedded-uploader/embedded-uploader.md @@ -0,0 +1,79 @@ +# Embedded Uploader + + +### Introduction +The TPStreams Uploader allows you to embed a powerful video upload tool directly on your website. With this integration, you can upload videos directly to your TPStreams account without needing to navigate away from your site, making the experience smooth and efficient. Whether you're embedding the uploader on a standalone page or in a modal, this guide will walk you through each step to get it up and running. + + ![Uploader UI](./img/uploader_step_1.png) + + + +## Guide to integrate the uploader +This guide will help you integrate the TPStreams video uploader into your website allowing you to upload videos directly to your TPStreams account. + + +### Step 1: Get the Authentication Token +Use the API mentioned [here](../server-api/authentication.md) to obtain a user authentication token. This token is required for the uploader to authenticate uploads. + + +### Step 2: Import the TPStreams Uploader SDK +Include the TPStreams Uploader SDK script in your webpage. Add the following ` +``` + + +### Step 3: Add the TPStreams Uploader HTML Element +Place the following HTML tag where you want the uploader to appear on your webpage, including any modals if needed. +Make sure to replace the organization-id attribute with your own TPStreams organization ID. + +```html + +``` + +Note: This tag also supports `width` and `height` attributes if you need to customize the dimensions of the uploader UI. + + +### Step 4: Initialize the Uploader +When you are ready to display the uploader, execute the following JavaScript to initialize it with the authentication token: + +```html + +``` + + +### Full Example Code +The following code will display the TPStreams uploader UI on your webpage, allowing users to upload videos directly to your account. + +```html + + + + + + + + + + + + + + + +``` + + +### Domain Restrictions for Embedding +In TPStreams settings, you can restrict the allowed domains that can embed this uploader. Set the allowed domain(s) to ensure only specified sites can use your uploader. If no domain is specified, all domains are permitted by default. + + ![Domain Restriction](./img/uploader_allowed_domains.png) \ No newline at end of file diff --git a/docs/embedded-uploader/img/uploader_allowed_domains.png b/docs/embedded-uploader/img/uploader_allowed_domains.png new file mode 100644 index 0000000..d7274b6 Binary files /dev/null and b/docs/embedded-uploader/img/uploader_allowed_domains.png differ diff --git a/docs/embedded-uploader/img/uploader_step_1.png b/docs/embedded-uploader/img/uploader_step_1.png new file mode 100644 index 0000000..2d26ac5 Binary files /dev/null and b/docs/embedded-uploader/img/uploader_step_1.png differ diff --git a/docusaurus.config.js b/docusaurus.config.js index 1b94fda..9130440 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -72,6 +72,12 @@ const config = { sidebarId: 'videoEmbeddingSidebar', label: 'Video Embedding', }, + { + type: 'docSidebar', + position: 'left', + sidebarId: 'uploaderSidebar', + label: 'Embedded Uploader', + }, { type: 'docSidebar', position: 'left', diff --git a/sidebars.js b/sidebars.js index 0ce3e9c..3934f26 100644 --- a/sidebars.js +++ b/sidebars.js @@ -50,6 +50,12 @@ const sidebars = { dirName: 'live-stream-api', }, ], + uploaderSidebar: [ + { + type: 'autogenerated', + dirName: 'embedded-uploader', + }, + ], }; module.exports = sidebars;