# Setting up Zoom as a React Component

**URL:** <https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890>\
**Category:** Web\
**Created:** [July 31, 2020, 6:43pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890 "2020-07-31T18:43:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![titiktemu](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/titiktemu/32/12731_2.png) [@titiktemu](https://devforum.zoom.us/u/titiktemu)\
**Post date:** [July 31, 2020, 6:43pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/1 "2020-07-31T18:43:11Z")

</div>

**Description**  
How to setting up zoom as a React component.

I have setting the base configuration an below are the Component

```
componentDidMount() {

    const signatureEndpoint = ''

    const apiKey = process.env.TITIKTEMU_ZOOM_API_KEY

    const meetingNumber =

    const role = 0

    const leaveUrl = 'http://localhost:9999'

    const userName = 'WebSDK'

    const userEmail = ''

    const passWord = ''

    ZoomMtg.preLoadWasm();

    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.5/lib', '/av')

    ZoomMtg.prepareJssdk();

    ZoomMtg.generateSignature({

      meetingNumber: meetingNumber,

      apiKey: apiKey,

      apiSecret: process.env.TITIKTEMU_ZOOM_API_SECRET,

      role: role,

      success (res) {

        console.log('signature', res.result)

        const signature = res.result

        ZoomMtg.init({

          leaveUrl: leaveUrl,

          disableCallOut: true,

          disableRecord: true,

          isSupportQA: false,

          isSupportCC: false,

          showPureSharingContent: false,

          screenShare: false,

          disableJoinAudio: false,

          audioPanelAlwaysOpen: false,

          isSupportChat: true,

          videoDrag: false,

          disableInvite: true,

          success () {

            ZoomMtg.join(

              {

                meetingNumber: meetingNumber,

                userName: userName,

                signature: signature,

                apiKey: apiKey,

                passWord: passWord,

                success () {

                  console.log('join meeting success')

                },

                error (res) {

                  console.log('Error generating signature')

                  console.log(res)

                }

              }

            )

          },

          error (res) {

            console.log(res)

          }

        })

      }

    })

  }

```

And what to render into the component?

I’ve setting up the signatureEndpoint into heroku, but i’m still new to understand all the things.  
Therefore your help would be awesome

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 3, 2020, 7:48pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/2 "2020-08-03T19:48:44Z")

</div>

Hey @titiktemu,

You can include the [Web SDK](https://www.npmjs.com/package/@zoomus/websdk) into any react component.

Here is a sample app someone in the community created:

> [@Integrating websdk in new create react app](https://devforum.zoom.us/t/integrating-websdk-in-new-create-react-app/7334/13):
>
> Hey @nBow, We do not have a React Sample App yet, but a few people in the community have built some: Thanks, Tommy

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![titiktemu](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/titiktemu/32/12731_2.png) [@titiktemu](https://devforum.zoom.us/u/titiktemu)\
**Post date:** [August 13, 2020, 1:51pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/3 "2020-08-13T13:51:58Z")

</div>

Awesome @tommy, i’ve been checking the project and it start.

But there was a error that said “Joining meeting timeout”, invalid parameter as stated below

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/a/a0a410d25e54f0cfecb8b2ff48d9de92b8dfba9c.png)

Do i need to start some server to create a new meeting?, what am i missing?

Thanks.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 13, 2020, 5:13pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/4 "2020-08-13T17:13:53Z")

</div>

Hey @titiktemu,

Please share your Web SDK Init and Join function code so I can debug.

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![titiktemu](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/titiktemu/32/12731_2.png) [@titiktemu](https://devforum.zoom.us/u/titiktemu)\
**Post date:** [August 14, 2020, 3:27am UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/5 "2020-08-14T03:27:02Z")

</div>

Hey @tommy, below are the code

```
function joinMeeting(signature, meetConfig) {
ZoomMtg.init({
  leaveUrl: "https://zoom.us/",
  isSupportAV: true,
  success: function (success) {
    console.log("Init Success ", success);
    ZoomMtg.join({
      meetingNumber: meetConfig.meetingNumber,
      userName: meetConfig.userName,
      signature: signature,
      apiKey: meetConfig.apiKey,
      passWord: meetConfig.passWord,

      success: (success) => {
        console.log(success);
      },

      error: (error) => {
        console.log(error);
      },
     });
    },
  });
 } 

```

Btw, i’ve fix it a little bit, and now the error are the meeting number is not found on console.log

```
Object
errorCode: 3707
errorMessage: "The meeting number is not found."
method: "join"
result: "The meeting number is not found."
status: false
__proto__ : Object

```

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/1/11a282fcfb29a51ba5564637ff3d061a11ea072a.png)

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 17, 2020, 11:17pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/6 "2020-08-17T23:17:35Z")

</div>

Hey @titiktemu,

Happy to hear you are making progress!

Does the meeting number you are using exist? Have you created the meeting before hand?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![titiktemu](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/titiktemu/32/12731_2.png) [@titiktemu](https://devforum.zoom.us/u/titiktemu)\
**Post date:** [August 23, 2020, 11:11am UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/7 "2020-08-23T11:11:56Z")

</div>

I don’t think so @tommy,

How can i create the meeting on local (in app)?, because the end goal are later on the user of my platform can directly create and join zoom meeting in “titiktemu platform”

Thanks,

Evan

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 24, 2020, 10:03pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/8 "2020-08-24T22:03:29Z")

</div>

Hey @titiktemu,

You can use the [Create Meeting API](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingcreate). 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [September 3, 2020, 10:03pm UTC](https://devforum.zoom.us/t/setting-up-zoom-as-a-react-component/25890/9 "2020-09-03T22:03:35Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.