doc: Add guide to integrate videos uploader (#57)

- Add documentation for embedded videos uploader.
testpress · Nov 5, 2024 · 76a2594 · 76a2594
1 parent 6f845df
commit 76a2594
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 0 deletions.
diff --git a/docs/embedded-uploader/embedded-uploader.md 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 `<script>` tag in the `<head>` or right after the starting `<body>` tag:
+
+```html
+<script src="https://static.testpress.in/static/js/tpstreams-uploader.min.js"></script>
+```
+
+
+### 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
+<tpstreams-uploader organization-id="your-organization-id"></tpstreams-uploader>
+```
+
+<b>Note:</b> 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
+<script>
+  const tpstreamsUploader = document.querySelector('tpstreams-uploader');
+  tpstreamsUploader.authToken = '<authentication token>'; // Use token from Step 1
+  tpstreamsUploader.initialize();
+</script>
+```
+
+
+### 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
+<html>
+  <head>
+    <!-- TPStreams Uploader SDK -->
+    <script src="https://static.testpress.in/static/js/tpstreams-uploader.min.js"></script>
+  </head>
+  <body>
+
+    <!-- TPStreams Uploader Element -->
+    <tpstreams-uploader organization-id="cmcktz"></tpstreams-uploader>
+
+    <!-- Initialization Script -->
+    <script>
+      const uploader = document.querySelector('tpstreams-uploader');
+      uploader.authToken = '<authentication token>'; // Replace with the actual token
+      uploader.initialize();
+    </script>
+
+  </body>
+</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)
diff --git a/docs/embedded-uploader/img/uploader_allowed_domains.png b/docs/embedded-uploader/img/uploader_allowed_domains.png
diff --git a/docs/embedded-uploader/img/uploader_step_1.png b/docs/embedded-uploader/img/uploader_step_1.png
diff --git 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
@@ -50,6 +50,12 @@ const sidebars = {
         dirName: 'live-stream-api',
       },
     ],
+  uploaderSidebar: [
+    {
+      type: 'autogenerated',
+      dirName: 'embedded-uploader',
+    },
+  ],
 };
 
 module.exports = sidebars;