{"id":6479,"date":"2022-04-15T12:56:37","date_gmt":"2022-04-15T04:56:37","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=6479"},"modified":"2025-04-04T17:26:57","modified_gmt":"2025-04-04T09:26:57","slug":"extend-video-embed","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/low-code-video-embed\/extend-video-embed\/","title":{"rendered":"Extend Video Embed"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>A Webhook Function Framework has been introduced, enabling developers to extend Video Embed capabilities by adding new features or updating existing ones, including UI and UX enhancements. This framework allows the integration of external CSS and JavaScript libraries, which can be executed in response to specific Video Room events, thereby enhancing the functionality and customization of the video experience. <a rel=\"noreferrer noopener\" href=\"https:\/\/www.enablex.io\/insights\/low-code-video-embed-multiple-language\/?utm_source=chatgpt.com\" target=\"_blank\"><\/a><\/p><\/blockquote>\n\n\n\n<h2>Table of Contents<\/h2>\n\n\n\n<ul><li><a href=\"#overview\">Overview<\/a><\/li><li><a href=\"#insert-types\">Type of Code Inserts<\/a><\/li><li><a href=\"#setup-inserts\">Setup Code Inserts<\/a><\/li><li><a href=\"#programming-interface\">Programming Interface<\/a><\/li><li><a href=\"#example\">Coding Example<\/a><\/li><li><a href=\"#dos-donts\">Do&#8217;s &amp; Don&#8217;ts<\/a><\/li><\/ul>\n\n\n\n<a name=\"overview\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Overview<\/h2>\n\n\n\n<p>Apart from customization of UI and existing features of Video Embed, developers need an additional interface to help them extend Video Embed by adding new features and updating the UI and UX of available features. <\/p>\n\n\n\n<p>To meet this requirement, a Webhook function framework is introduced, allowing developers to write code blocks associated with specific events in the Video Room and make them available at runtime during Video Sessions.<\/p>\n\n\n\n<a name=\"insert-types\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Type of Code Inserts<\/h2>\n\n\n\n<p>The following external code inserts are supported in the Video Embed Code:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Third-Party JS file<\/h3>\n\n\n\n<p>A third-party server-hosted JS file URL.&nbsp; The JS file(s) will be included in HTML HEAD to make it available at Browser End Point for execution.<\/p>\n\n\n\n<p>Note the following:<\/p>\n\n\n\n<ul><li>JS file URL may be Web Server Path or CDN endpoint<\/li><li>Hosted on https<\/li><li>CORS enabled host<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;html lang=\"en\"&gt;\n &lt;head&gt;\n  &lt;script src=\"https:\/\/YOUR-URL-TO-JS-LIB\"&gt;&lt;\/script&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;\n<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Third-Party CSS file<\/h3>\n\n\n\n<p>A third-party server-hosted CSS file URL.&nbsp; The CSS file will be included in HTML HEAD to make it available at Browser End Point for rendering. Note the following:<\/p>\n\n\n\n<p>Note the following:<\/p>\n\n\n\n<ul><li>CSS file URL may be Web Server Path or CDN endpoint<\/li><li>Hosted on https<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;html lang=\"en\"&gt;\n &lt;head&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/YOUR-URL-TO-CSS-FILE\"&gt;&lt;\/script&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<a name=\"setup-inserts\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Setup Code Inserts<\/h2>\n\n\n\n<p>Both types of inserts explained above may be set\/configured through Portal. A new tool\/form is introduced helps to add JS-URL or CSS-URL.<\/p>\n\n\n\n<ul><li>Login to the <strong>Portal<\/strong><\/li><li>Go to <strong>Video \/ Settings<\/strong><\/li><li>Go to the <strong>Features <\/strong>tab<\/li><li>Open up the <strong>External Libraries<\/strong> Section.<\/li><li>In the form:<ul><li>Choose the <strong>type of file<\/strong> you want to add, viz. CSS, JS<\/li><li>Enter the complete <strong>HTTPS URL <\/strong>to the CSS or JS.<\/li><li>Repeat the process of <strong>adding new file(s)<\/strong> by clicking the \u201c+\u201d sign.<\/li><li><strong>Submit <\/strong>the form to make your files available in the Embed.<\/li><\/ul><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"842\" height=\"315\" src=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/External-Library-Embed.png\" alt=\"\" class=\"wp-image-7266\" srcset=\"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/External-Library-Embed.png 842w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/External-Library-Embed-300x112.png 300w, https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-content\/uploads\/2025\/04\/External-Library-Embed-768x287.png 768w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/figure>\n\n\n\n<p><strong>Note:<\/strong><\/p>\n\n\n\n<ul><li>You can add a maximum of 10 external files to Embed.<\/li><li>You can add standard JS libraries, CSS, etc.<\/li><li>You can write custom JS and CSS files.<\/li><\/ul>\n\n\n\n<a name=\"programming-interface\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Programming Interface<\/h2>\n\n\n\n<p>Using external inserts, you get access to all global variables and connected Room Objects. The Room Object further allows you to access all Web SDK methods and event notifications that you can work upon to add new features or update existing features\/UX.<\/p>\n\n\n\n<p><strong>Note:<\/strong> If you want to add\/update new features based on the Web SDK, you should read through our <a href=\"\/developer\/video-api\/client-api\/web-toolkit\/\">Web SDK Documentation<\/a>.<\/p>\n\n\n\n<p>You can code for:<\/p>\n\n\n\n<ul><li>Custom functions.<\/li><li>Define the <a href=\"#webhook-functions\">Webhook functions<\/a> (Listed later in the document) to execute your Code Block along with the associated event.<\/li><li>Make use of data received with event notification from the Video Session.<\/li><li>Make use of global variables and room-object.<\/li><\/ul>\n\n\n\n<a name=\"webhook-functions\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3><a>Webhook Functions<\/a><\/h3>\n\n\n\n<p>A third-party server-hosted JS file URL.&nbsp; The JS file(s) will be included in HTML HEAD to make it available at Browser End Point for execution.<\/p>\n\n\n\n<p>Webhook functions help you to map your code block to a specific event to execute it when a related event occurs. You are required to define one or many of these functions, as per your requirement to execute your code at the right moment. If you don\u2019t define any of these available Webhook functions, the execution of the related function is skipped.&nbsp; <\/p>\n\n\n\n<p><strong>Available Webhook Functions:<\/strong><\/p>\n\n\n\n<ul><li>Room Connection<ul><li><code>enxHookRoomConnected() <\/code>\u2013 Executed when an End Point gets connected to the Video Room.<\/li><li><code>enxHookRoomDisconnected()<\/code> &#8211; Executed when an End Point gets disconnected from the Video Room, either due to network fluctuation or explicit disconnect or at end of session. Reason of disconnection may be known by data received with related event.<\/li><li><code>enxHookRoomReconnected()<\/code> &#8211; Executed when an End Point gets re-connected to the Video Room.<\/li><\/ul><\/li><li>User Connection<ul><li><code>enxHookUserConnected() <\/code>\u2013 Executed when any  user gets connected to Video Room, <\/li><li><code>enxHookUserDisconnected()<\/code> &#8211; Executive when any user gets disconnected from Video Room.<\/li><\/ul><\/li><li>Moderated Entry<ul><li><code>enxHookRoomAwaited() <\/code>\u2013 Executed when an End Point waits to get Moderator\u2019s permission to get connected to the Video Room.<\/li><li><code>enxHookRoomEntryAllowed() <\/code>\u2013 Executed when an End Point is permitted by Moderator to get connected to the Video Room.<\/li><li><code>enxHookRoomEntryDenied()<\/code> &#8211; Executed when an End Point is denied by Moderator to get connected to the Video Room.<\/li><\/ul><\/li><li>Streams<ul><li><code>enxHookStreamSubscribed()<\/code> &#8211; Executed when an End Point subscribes successfully to one of the Remote Stream available in the Video Room.<\/li><\/ul><\/li><li>Messaging &amp; Signaling<ul><li><code>enxHookCustomSignalReceived()<\/code> &#8211; Executed when an End Point receives custom signal from any other end point connected to the Video Room.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Note:<\/strong><\/p>\n\n\n\n<ul><li>Webhook Function names are case-sensitive.<\/li><li>These functions have access to Room Object and all other global variables in the Embed.<\/li><\/ul>\n\n\n\n<a name=\"event-data\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3><a>Event Data<\/a><\/h3>\n\n\n\n<p>Each Endpoint keeps receiving Event Notifications from the connected Video Room with related data in JSON format. These data structures, as received, are made available to you in form of a key in Object named <code>enxEvents<\/code>.<\/p>\n\n\n\n<p><strong>Available Event Data:<\/strong><\/p>\n\n\n\n<ul><li>Room Connection<ul><li><code>enxEvents.roomReconnected<\/code> \u2013 Data received when Video Room is reconnected<\/li><li><code>enxEvents.roomDisconnected<\/code> \u2013 Data received when disconnected from Video Room. It contains the reason for the disconnection.<\/li><\/ul><\/li><li>User Connection<ul><li><code>enxEvents.userConnected<\/code>\u2013 Data received when any user gets connected to the Video room. Data includes meta data of the connecting user as <code>{ \"clientId\": \"String\", \"name\": \"String\", \"role\": \"String\"}<\/code><\/li><li><code>enxEvents.userDisconnected<\/code>\u2013 Data received when any user gets disconnected from the Video room. Data includes meta data of the disconnecting user as <code>{ \"clientId\": \"String\", \"name\": \"String\", \"role\": \"String\"}<\/code><\/li><\/ul><\/li><li>Moderated Entry<ul><li><code>enxEvents.roomEntryAllowed<\/code> \u2013 Data received when an awaited user is allowed into the Video Room.<\/li><li><code>enxEvents.roomEntryDenied<\/code> \u2013 Data received when an awaited user is denied entry to Video Room.<\/li><\/ul><\/li><li>Streams<ul><li><code>enxEvents.streamSubscribed<\/code> \u2013 Data received when a Remote Stream is subscribed.<\/li><\/ul><\/li><li>Messaging &amp; Signaling<ul><li><code>enxEvents.customSignalReceived<\/code> \u2013 Data received when a Custom Signaling event is received.<\/li><\/ul><\/li><\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"example\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2><a>Coding Example<\/a><\/h2>\n\n\n\n<h3><strong>Example#1<\/strong> Webhooking basics<\/h3>\n\n\n\n<ul><li><strong>Code<\/strong><ul><li>Write your code in a JS file. Try it in <code>enxHookRoomConnected() <\/code>and <code>enxHookRoomDisconnected()<\/code> Webhook functions.<\/li><li>Host the JS file you a secured server. i.e. JS file is accessible over https:\/\/<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Your Custom Code Block in enxHookRoomConnected() function\nfunction enxHookRoomConnected() {\n\talert(\u201cYou are connected to Video Room\u201d);\n}\n\nfunction enxHookRoomDisconnected() {\n\talert(\u201cYou are disconnected from Video Room.\u201d);\n}\n<\/pre>\n\n\n\n<ul><li><strong>Setup<\/strong><ul><li>Follow the steps explained earlier in the document to add External Files for Video Embed.<\/li><li>Add your JS file as JS URL insert<\/li><\/ul><\/li><li><strong>Test <\/strong><ul><li>You are done. Try to connect to your Embed and see your Code in action.<\/li><\/ul><ul><li>This will show a JS Alert with \u201cYou are connected to Video Room\u201d as soon as the End Point gets connected to the Video Room. It will show JS Alert with \u201cYou are disconnected from Video Room\u201d when End Points gets disconnected.<\/li><\/ul><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<a name=\"dos-donts\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2><a>Do&#8217;s &amp; Don&#8217;ts for Developers<\/a><\/h2>\n\n\n\n<p>While developing JS Library to insert or prepare code blocks to insert against exposed events, developers must follow the guidelines given below:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Do&#8217;s<\/h3>\n\n\n\n<ul><li>Read through the Embed JS library to understand how it codes and works. Make note of variables and objects in use.<\/li><li>Read through the Web SDK section that helps you understand how specific function works. This helps you even extend.<\/li><li>Test out your updates thoroughly.<\/li><li>Resolve CORS issue against JS inserts if any.<\/li><li>While defining CSS Class\/Object names, use unique Prefix (e.g. enxEmbed_CLASSNAME or enxEmbed_OBJECTNAME) to ensure it doesn\u2019t affect existing class\/object definition with the same name (if any).<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Don&#8217;ts<\/h3>\n\n\n\n<ul><li>Don\u2019t re-declare existing variables and objects.<\/li><li>Don\u2019t update the values of existing variables and objects. You may just refer to their values to use in your own code.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A Webhook Function Framework has been introduced, enabling developers to extend Video Embed capabilities by adding new features or updating existing ones, including UI and UX enhancements. This framework allows the integration of external CSS and JavaScript libraries, which can be executed in response to specific Video Room events, thereby enhancing the functionality and customization of the video experience. Table of Contents Overview Type of Code Inserts Setup Code Inserts&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2363,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"A Webhook Function Framework has been introduced, enabling developers to extend Video Embed capabilities by adding new features or updating existing ones, including UI and UX enhancements. This framework allows the integration of external CSS and JavaScript libraries, which can be executed in response to specific Video Room events, thereby enhancing the functionality and customization&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6479"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=6479"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/6479\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/2363"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=6479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}