Web Viewer in Bubble

Need help Plugins
1

Hi friends, is it possible to open a web page in order to view it on the same page as Bubble, via a Web Viewer?

So, keep the Bubble page open and below (in a box) you can see another web page. A thousand thanks!

2

Yep. Use the html element and some iframe code

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>
2 Likes
3

Have I done something wrong here? I feel like I’m missing something to add to the HTML element.

Screen Shot 2021-10-03 at 12.25.45 PM

Screen Shot 2021-10-03 at 12.25.38 PM
Screen Shot 2021-10-03 at 12.25.38 PM981×284 16.6 KB

4

Hey @boston85719
It appears that although that’s the example they provide, the link doesn’t work or they don’t allow iframing their site.

Try this one

5

Which one is that? It is kind of hard to read :grin:

6

Hahaha :sob: sorry @boston85719. that text surely wont work

try this instead or check out the set up here or see it live here
<iframe src="https://www.scorecardx.org" title="Jareds Project" width="100%" height="100%"></iframe>

7

Thanks for that. That works.

This has got me interested in understanding more about what I would need to do to make my app more accessible through an iFrame. I really want to create a app that can be used as a widget in others existing traditional sites.

8

the real issue you’ll experience with that is setting a user cookie. When a user logs in, bubble wants to set the user cookie on your computer (from what I can tell). What they wont let happen is setting a cookie from within an iframe. At least that was my experience.

So, you could run the app part but login a user in may be an issue. You could possibly work around this by using an external auth provider.

9

Thanks for the tip. I’m going to have a play around this week.

1 Like
10

I’ve managed to make an iframe widget for my client’s podcasts.
You can see the iframe here (Wrestleville is currently running Wordpress on a DO box): ☆WRESTLEVILLE☆
and original bubble page here:
Podcasts - Wrestleville

The trick for me was using the “Scripts n’ Styles” plugin with Wordpress and adding this script to the wrestleville.com/podcasts page , this enables communication between your iframe/bubble and the host site using url parameters (:sweat_smile: at least this is what I think it does, it’s been a while since I’ve tinkered with it, probably found it from stack exchange/jsfiddle):

/*get url parameters*/

const urlParams = new URLSearchParams(window.location.search);

/*get iframe url*/

const b2bIframePodcast = document.getElementById('b2b-iframe-podcast');
const url = new URL(b2bIframePodcast.src);

/*append url parameters to iframe*/

b2bIframePodcast.src = url.toString() + '?' + urlParams.toString();

window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data! 
    if (event.origin.startsWith('https://lancebychance.com')) { 
		
	let urlParams = new URLSearchParams(window.location.search);

        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data); 
		if(event.data == 'show all') {	
			//Load any data 
			//Do the operation
			urlParams.delete('podcast');
			const newUrl = window.location.origin + window.location.pathname + '?' + urlParams.toString();	
			history.replaceState({}, null, newUrl);
		} else /*if number*/ {
			//Do the operation
			urlParams.set('podcast', event.data);
			const newUrl = window.location.origin + window.location.pathname + '?' + urlParams.toString();
			history.replaceState({}, null, newUrl);
			
		} /*else if string starts with http*/ /* {
			edit fb meta tag
			document.getElementsByTagName('meta')['property'].content;
			<meta property="og:image" content="http://www.wrestleville.com/wp-content/uploads/2017/04/cropped-mask_512x512.png" />

		}*/
    } else {
        // The data was NOT sent from your site! 
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return; 
    } 
});

The only issue remaining for me is that while the above script enables link sharing, I cannot get the proper photo to show up on a social media post when using the wrestleville.com link; would be great to figure out how to do this or if it’s possible, but eventually i want to port over my client completely to bubble so not have to maintain wordpress anymore, so this may be moot for me, but definitely something that needs to be cracked to have an effective widget that works properly with social media linking.

1 Like
11

Does this let your users complete authenticated actions in the widget?

12

that’s a good question. haven’t tried logging a user in from an iframe and the existing method would expose the password. maybe using the browser’s session storage, the password could be handled securely and then the user could be authenticated.