Building an app that requires embedding of an iframe / javascript code

Need help
1

Good day everyone. Need help here please.

I’m working on an app that needs users to add an embed code into their websites. The app lets users create numerous popups. These popups will appear for individual users based on different criteria.

Here’s how it functions: website owners insert a specific piece of iframe or JavaScript code on their sites to display popups.

One challenge I’m facing is generating distinct iframe or JavaScript code for each website that uses my app.

For example, Maria’s website is www.mariafashion.com, and Imran’s is www.awesomesocks.com.

They both need exclusive iframe or JavaScript codes. These codes will be added to their websites, and the popups will appear from their respective accounts on Bubble.

It seems generating unique iframes or javascript embed codes might be a limitation of Bubble. If you have any insights or workarounds, I’d greatly appreciate your input.

Looking forward to your response.

Thank you,
Imran

2

There is a javascript library which automatically resizes the iframe on the page. you need to insert some code in your bubble app as well as in your page where the iframe is displayed.

1 Like
3

Appreciate your response @daviddr17
Before I get to resizing the iframe, I needed help on creating a unique iframe for every website that registered on my app.

4

Well the simple answer is that you do that with dynamic expressions. I have a chatbot that can be embedded in site, I just dynamically specify the chatbot URL. But maybe there’s some auto-generating method I’m not aware of.

1 Like
5

Finally!
Sonlme ray of light.
Would you mind sharing the code of the dynamic expression so that I have a starting point.

Just the code that users would use to add your chatbot on to their website.

6

I used this to place it like a chatbot in the right bottom:
<iframe src="https://your.domain.com/page_name/Current page's User's Slug" style="position:fixed;bottom:0px;right:0px;width:220px;height:270px;z-index:10000;border:none;margin:0 20px 20px 0;"></iframe>

7

Place it in the body of your website.

8

and how would you apply the condition to it that:

When user of domainA visit the website, open chatbot A,

When user of domainB visit the website, open chatbot B…

and considering that you app has 1000 users.

9

From within the iFrame you would likely have to monitor the document or window global objects (the url that the user is in … these objects have parameters for this) in the DOM. You will need to run javascript for this.

10

Would really appreciate if you could help me with that javascript code.

I’m still just a no-code coder :see_no_evil:

Let’s say I have a user who has subscribed to my popup app for the domain www.imran.com

Now only visitors of imran.com should be able to see popups that the admin has created for them in my app.

11

Then you’ll find this project pretty hard so will want to learn some code skills or consider revising your project. Nobody’s going to be able to do it for free because it’s not straight forward

1 Like
12

This topic was automatically closed after 70 days. New replies are no longer allowed.