# How To Add A Video Calling Website To Your App **URL:** https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334 **Category:** Tutorials and DIY Guides **Tags:** community, javascript, expert, tutorial **Created:** [June 26, 2021, 12:38pm UTC](https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334 "2021-06-26T12:38:31Z") **Posts on this page:** 4 **Page:** 1
### Author: ![overturner](https://avatars.discourse-cdn.com/v4/letter/o/53a042/32.png) [@overturner](https://community.thunkable.com/u/overturner) #### Post date: [June 26, 2021, 12:38pm UTC](https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334/1 "2021-06-26T12:38:31Z")
Hello Everyone . Hope You are having a good day Here Is the detailed explanation of how to add a video calling feature to your app Below are the steps to do so : 1. Go to [enablex.io](http://enablex.io) or any other such website like [agora.io](http://agora.io) etc (I am not promoting any of them) 2. For This Project i used [enablex.io](http://enablex.io) 3.Create a project , add video feature and keep the embed code with you. **Any video call website wont work on thunkable’s web viewer because it isn’t a full fledged browser** > [@Why Web viewer doesn't show video and audio](https://community.thunkable.com/t/why-web-viewer-doesnt-show-video-and-audio/1361974/7): > > `Web viewer` runs in its own contained environment and has no access to your browser cookies which means if you want to use something to do with external devices then you have to code all permission granting within your code. Also , We cant let The user get the actual link as then he/she can share the link to anyone from the address bar. So we need a way to verify that the user is using our app before allowing access to the website. 1. Using github or vs code, Create an index.html file. 5.Copy and paste this code ```auto Health 24/7

``` We would be Using the Web viewer extension to pass back and forth the code for logging in. 1. For style.css i have used this code ```auto iframe { height: 100%; width: 100%; } input{ width: 95%; height: 20%; } ``` 1. For main.js This is the code ```auto verified = 'false' rdmnmbr = Math.floor(100000 + Math.random() * 900000) ThunkableWebviewerExtension.postMessage(rdmnmbr) function Checkforcode() { userincode = document.getElementById('code').value if (userincode == rdmnmbr) { window.open("videocll.html"); document.getElementById('result').innerHTML = 'Logging you in' } else document.getElementById('result').innerHTML = 'Code Invalid' } function checkifverified() { if (verified == "false") { window.open("index.html", "_self"); } } ``` Breakdown of the above code a). `rdmnmbr = Math.floor(100000 + Math.random() * 900000) ThunkableWebviewerExtension.postMessage(rdmnmbr)` This Creates a random 6 digit code and sends it to your app through the webviewer extension. b.) `function Checkforcode() { userincode = document.getElementById('code').value if( userincode == rdmnmbr) { window.open("videocll.html"); document.getElementById('result').innerHTML = 'Logging you in' } else document.getElementById('result').innerHTML = 'Code Invalid' }` This function is called when the submit button is clicked on the html page. It verifies whether User has entered the correct code or not The check if verified function is called when the videocll.html page is loaded. IT will check if the user is verified or not .if not it will send him/her to the index page. Code For the Videocll.html page 8. ```auto Health 24/7 ``` In the iframe You Have to change the src to Your website embed link At last We have to add the thunkable page blocks. 9. a) For Designing Add A simple web viewer and label(To show the code) Set the web viewers URL to The hosted GitHub Index.html page b) The blocks Page: ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/4/3404f14c782b6a828c4a397705365ba24860314e.png) 10. Sweet! Enjoy Your Embedded Video Call In Your App **For Adding Sdk’s Or apis Of video calling websites i Suggest You Ask [@Power\_Thunkers](https://community.thunkable.com/groups/power_thunkers)** Please Comment And like my post if it helped you Thank you @muneer for your help Thank you > **P.S.** > > Check Out This Post For More > [Why Web viewer doesn't show video and audio](https://community.thunkable.com/t/why-web-viewer-doesnt-show-video-and-audio/1361974) ---
### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer) #### Post date: [June 26, 2021, 12:54pm UTC](https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334/2 "2021-06-26T12:54:24Z")
That was a detailed post. Thank you. ---
### Author: ![anush](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/anush/32/124120_2.png) [@anush](https://community.thunkable.com/u/anush) #### Post date: [December 10, 2021, 8:58am UTC](https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334/4 "2021-12-10T08:58:57Z")
@overturner Can you give the project link that you have and the github link so i can check it ---
### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis) #### Post date: [November 8, 2024, 1:20pm UTC](https://community.thunkable.com/t/how-to-add-a-video-calling-website-to-your-app/1365334/5 "2024-11-08T13:20:06Z")