# Integrate Meeting SDK on a web page

**URL:** <https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099>\
**Category:** Meeting SDK\
**Created:** [February 14, 2023, 9:52am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099 "2023-02-14T09:52:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Akram](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/akram/32/45000_2.png) [@Akram](https://devforum.zoom.us/u/Akram)\
**Post date:** [February 14, 2023, 9:52am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/1 "2023-02-14T09:52:24Z")

</div>

**Description**  
Hello there,  
I wanted people to be able to join meetings through a HTML web page, I have tried this simple app and it is working fine[[GitHub - zoom/meetingsdk-web-sample: Zoom Meeting SDK Web Sample App](https://github.com/zoom/meetingsdk-web-sample)], the thing I did not like about the sample app is it requires people to enter information which I do not I just need people to press a “Join” button and go directly to the meeting I hold in my web page.  
Note: I went through the Meeting SDK doc and a lot of blogs, but undoubtingly I could not find the solution.  
I hope you can help as it has been over a week and I still could not find the solution.  
Many thanks in advance

This is the code:

```auto
<!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.7/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.7/css/react-select.css" />
    <style>

    /* To show */
    #zmmtg-root {
    display: block;
    }
    </style>
</head>
<body>

<!-- Dependencies for client view and component view -->
<script src="https://source.zoom.us/2.9.7/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/lodash.min.js"></script>

<!-- CDN for client view -->
<script src="https://source.zoom.us/zoom-meeting-2.9.7.min.js"></script>

<!-- CDN for component view -->
<script src="https://source.zoom.us/zoom-meeting-embedded-2.9.7.min.js"></script>

<script>
// Global CDN, use source.zoom.us:
ZoomMtg.setZoomJSLib('https://source.zoom.us/2.9.7/lib', '/av')
// loads dependent assets
ZoomMtg.preLoadWasm()
ZoomMtg.prepareWebSDK()
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US')
ZoomMtg.i18n.reload('en-US')
</script>

<script>
    ZoomMtg.init({
  leaveUrl: 'https://zoom.us', // https://example.com/thanks-for-joining
  success: (success) => {
    ZoomMtg.join({
      sdkKey: 'LGq3Hsxu4viYotYOqXpncXWFyzvFFbu3ljz2',
      //signature: '', // role in SDK signature needs to be 0
      meetingNumber: '84213248100',
      passWord: '',
      userName: '',
      success: (success) => {
        console.log(success)
      },
      error: (error) => {
        console.log(error)
      }
    })
  },
  error: (error) => {
    console.log(error)
  }
})
</script>

  <!-- added on import -->
  <div id="zmmtg-root"></div>
  <div id="aria-notify-area"></div>

  <!-- added on meeting init -->
  <div class="ReactModalPortal"></div>
  <div class="ReactModalPortal"></div>
  <div class="ReactModalPortal"></div>
  <div class="ReactModalPortal"></div>
  <div class="global-pop-up-box"></div>
  <div class="sharer-controlbar-container sharer-controlbar-container--hidden"></div>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 10:12am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/2 "2023-02-14T10:12:42Z")

</div>

@Akram Here are the sessions regarding WebSDK Integrations

- [Zoom Meeting SDK Integration with VueJS](https://youtu.be/CMpe56VoTTo)
- [Zoom Meeting SDK Integration with ReactJS](https://youtu.be/4BgkLvH7T0Y)
- [Zoom Meeting SDK Integration with AngularJS](https://youtu.be/utXjISjjHOY)
- [NextJS - Zoom WebSDK Component View](https://youtu.be/mwta4hZOtpc) ← Here described Component View Videos Rendering Sizes
- [Zoom Meeting SDK Client View Integration](https://youtu.be/zaIhI_BZKJo)

---

<div class="post-metadata">

**Author:** ![Akram](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/akram/32/45000_2.png) [@Akram](https://devforum.zoom.us/u/Akram)\
**Post date:** [February 14, 2023, 10:21am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/3 "2023-02-14T10:21:18Z")

</div>

Thank you Mr Naeem for your replay  
I have tried your tutorial and I could not complete it because the code did not show the meeting video in the first place.  
I did watch this video [https://www.youtube.com/watch?v=zaIhI\_BZKJo](https://www.youtube.com/watch?v=zaIhI_BZKJo)  
could share the code of that video?

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 10:41am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/4 "2023-02-14T10:41:52Z")

</div>

> [@Akram](#):
>
> show the meeting video in the first place.

Please explain a bit more about this 👆

---

<div class="post-metadata">

**Author:** ![Akram](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/akram/32/45000_2.png) [@Akram](https://devforum.zoom.us/u/Akram)\
**Post date:** [February 14, 2023, 10:50am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/5 "2023-02-14T10:50:48Z")

</div>

All I get is a black screen

```auto
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.8">
    <title>Meeting</title>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.7/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.9.7/css/react-select.css" />  
 </head>

 <body>

  <!-- added on import -->
  <div id="zmmtg-root"></div>
<!-- Use of this SDK is subject to our Terms of Service: https://explore.zoom.us/en/legal/zoom-api-license-and-tou -->

<!-- Dependencies for client view and component view -->
<script src="https://source.zoom.us/2.9.7/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/2.9.7/lib/vendor/lodash.min.js"></script>

<!-- CDN for client view -->
<script src="https://source.zoom.us/zoom-meeting-2.9.7.min.js"></script>

<!-- CDN for component view -->
<!--<script src="https://source.zoom.us/zoom-meeting-embedded-2.9.7.min.js"></script>-->

<script>
  document.addEventListener('DOMContenLoaded',function(){
    let url=new URL(location.href);

  ZoomMtg.setZoomJSLib('https://source.zoom.us/lib', '/av');
  ZoomMtg.preWasmLoad();
  ZoomMtg.prepareJssdk();

    ZoomMtg.init({
      leaveUrl: 'https://zoom.us',
      success: function(successResult){
        ZoomMtg.join({
          meetingNumber: url.searchParams.get('meetingNumber'),
          passWord: url.searchParams.get('passcode'),
          userName: url.searchParams.get('userNname'),
          userEmail: '',
          tk: '',
          signature: '',
          success: function(joined){
            console.log('--Joined -->', joined);
          },
          error: function(joinFail){
            console.log('--join fail -->', joinFail);
          }
        })
      },
      error: function(error){
        console.log('--sdk init error -->', error);
      }
    });
  });
</script>
 </body>

  </html>

```

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 10:51am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/6 "2023-02-14T10:51:53Z")

</div>

@Akram Share screenshot of page console.

---

<div class="post-metadata">

**Author:** ![Akram](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/akram/32/45000_2.png) [@Akram](https://devforum.zoom.us/u/Akram)\
**Post date:** [February 14, 2023, 10:54am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/7 "2023-02-14T10:54:20Z")

</div>

![Image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/5/8/58b89a627e7cad8722d5c9839ccdd6593ce7cfdc.jpeg)

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 10:57am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/8 "2023-02-14T10:57:05Z")

</div>

Please set a valid signature, sdkKey, meetingNumber, userName and password. I suggest please rewatch the session carefully.

---

<div class="post-metadata">

**Author:** ![Akram](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/akram/32/45000_2.png) [@Akram](https://devforum.zoom.us/u/Akram)\
**Post date:** [February 14, 2023, 11:03am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/9 "2023-02-14T11:03:58Z")

</div>

I have watched it more than one time, as I told you Sr I did not get the meeting video frame which is why I did not complete the whole code and I think you do not need sdk and other arguments just to show the frame of the meeting

This is the meeting video frame that I did not show on my page it is just a black screen

 ![Image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/5/c578766a1a7d0fb452fae451d97607c64ab87834.jpeg)

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 11:06am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/10 "2023-02-14T11:06:20Z")

</div>

> [@Akram](#):
>
> you do not need sdk and other arguments just to show

I am suggesting that please verify 👇 all are valid.

> [@freelancer.nak](#):
>
> signature, sdkKey, meetingNumber, userName and password

> [@Akram](#):
>
> Image1920×933 42.4 KB

👆 This only appears once you have requested SDK to join with valid payload.

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 11:07am UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/11 "2023-02-14T11:07:21Z")

</div>

> [@freelancer.nak](#):
>
> signature, sdkKey, meetingNumber, userName and password

👆 Where from you are getting these parameters?

---

<div class="post-metadata">

**Author:** ![freelancer.nak](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/freelancer.nak/32/40968_2.png) [@freelancer.nak](https://devforum.zoom.us/u/freelancer.nak)\
**Post date:** [February 14, 2023, 12:47pm UTC](https://devforum.zoom.us/t/integrate-meeting-sdk-on-a-web-page/83099/12 "2023-02-14T12:47:22Z")

</div>

@Akram Please ping here so that I can guide & share → [Learn With NAK](https://web.facebook.com/learnwithnak)
