CMS Development

John89
Member

React Meeting Integration

Hello,

 

I'm trying to integrate the Meeting module inside a React component, but without luck.

I receive the following warning: "Did not expect server HTML to contain a <iframe> in <div>."

 

Screenshot 2020-08-21 at 11.01.33.png

 

The component:Screenshot 2020-08-21 at 11.03.22.png

 

Thanks guys!

0 Upvotes
4 Replies 4
JOttenlips
Member

React Meeting Integration

The script wasn't working for me either in React, so i just added my own iframe. No React Helmet needed. Cheers!

```

<iframe
title={'hubspot'}
style={{
width: '100%',
height: '500px'
}}
/>
```
0 Upvotes
MassR
Member

React Meeting Integration

Just wrap the script with react-helmet 

CVanPutten
Participant

React Meeting Integration

This React snippet works in case others need the code:

<div className='scheduling-widget-wrapper'>
      <Helmet>
        <script
          type="text/javascript"
          src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"
        ></script>
      </Helmet>
      <div
        className="meetings-iframe-container"
        data-src="https://meetings.hubspot.com/[your-meeting-id]?embed=true"
      ></div>
    </div>

 

0 Upvotes
cathalhopper
HubSpot Employee
HubSpot Employee

React Meeting Integration

Hi @John89 , I hope all is good with you 🙂

 

The error message you are seeing here is specific to React and not related to HubSpot based on some external resources I've seen.
I'm not overly familiar with React so I can't pinpoint the issue and help from there, but there are a number of external resources where this has come up where it looks like resolutions have been found that you may find helpful!

https://stackoverflow.com/questions/45350360/react-16-warning-warning-js36-warning-did-not-expect-se...

https://github.com/facebook/react/issues/10879

https://github.com/vercel/next.js/issues/8773

Specifically it seems to point to hydrate with React: https://reactjs.org/docs/react-dom.html#hydrate

Hopefully that points you in the right direction!

Best,

Cathal 🙂

0 Upvotes