Forum Academy Marketplace Showcase Pricing Features

Embed iframe help

Hi there,

I have a video chat app that was working fine - except the iframe was too small. I tried to adjust the iframe size and broke the app. I tried to go back to the way it was (I stupidly didn’t set a restore point beforehand) and it is still broken. I am only working in the development mode because it’s not ready to be deployed.

Here’s the html element script

<script src="https://unpkg.com/@daily-co/daily-js"></script>
<script>
  callFrame = window.DailyIframe.createFrame();
  callFrame.join({ url: 'https://mydailyurl.daily.co/Current Page Request's Room' });
</script> 

If I hard code a known room into the url I get an application exception error. When I use the app the room is created fine in the other pages. When I click on connect (which is the trigger to go the page with the embedded iframe it loads https://my.bubbleapps.io/version-test/call/1634458643398x475459137540456450?debug_mode=true

That string of numbers I think is supposed to be the room name and it obviously isn’t and there is no iframe on the page. I have checked both bubble and daily and their statuses are fine.

What have I done? How do I fix it?

It was so easy to make in the first place and now I can’t work out why I can’t create it again.

Please help,

TIA

1 Like

Hi Michael! I actually worked on a daily plugin for bubble if you wanted to skip embedding the iframe directly happy to help with using the plugin! We have a tutorial as well on integrating with the plugin and tt comes automatically with a few different configurations, audio-only support, and things like the ability to live stream. Happy to help with that if you have any questions!

For your iframe, I think there should be a slight modification to the plain iframe code(pasted below) and underneath that is what it would look like if you wanted to update the iframe settings. Even if it throws the application exception error in the editor it should work when you preview it. Make sure there are also not adding any extra spaces around the URL

Iframe code

 <html>
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <body>
<script>
  callFrame = window.DailyIframe.createFrame();
  callFrame.join({ url: 'https://yourdomain.daily.co/hello' });
</script>
  </body>
</html>

What is would look like to adjust the iframe settings

<html>
  <script crossorigin src="https://unpkg.com/@daily-co/daily-js"></script>
  <body>
    <script>

      callFrame = window.DailyIframe.createFrame({
  iframeStyle: {
    position: 'fixed',
    border: '1px solid black',
    width: '375px',
    height: '450px',
    right: '1em',
    bottom: '1em'
  },
  showLeaveButton: true,
  showFullscreenButton: true
});
  

     callFrame.join({ url: 'https://yourdomain.daily.co/hello'})
        </script>
  </body>
</html>
1 Like

Also, you can actually revert your application even if you didn’t create a save point. To do that you would go to development, history and then type in the time that you want to revert to (i think personal plans keep a 7-day history and higher plans might have a 30-day history)

1 Like