Hello! I have a question that I’m hoping someone can help me answer. I have recently begun embedding for more than one site on my instance (pixls.us and digikam.org). I’m wondering if there’s a way to differentiate which host is being embedded in for styling? One site is white background and the other is dark. I’m trying to set a font color that works for both, but it’s.. difficult. :slight_smile: Is there some neat answer I’m missing for setting a CSS style rule that will match one and not the other?

Perhaps adding another parameter to DiscourseEmbed that we can specify, like a discourseEmbedClass that we can then attach to the iframe/embedded tag as a class, so we can target it with the embed CSS? DiscourseEmbed = { discourseUrl: 'http://discuss.pixls.us/', discourseEmbedUrl: 'REPLACE_ME' }; I’m happy to create a PR if someone could maybe point me to the relevant places to get started hacking?

I was playing around with the embed stuff the other day. You’re interested in public/javascripts/embed.js, and adding an additional query parameter to queryParams based on DE.discourseEmbedClass, which you could then set in the embedded code.

Why don’t you just style the embedded iframe from your sites’ css?

[תמונה] kraml: Why don’t you just style the embedded iframe from your sites’ css? It’s not possible to modify the iframe from the parent (particularly cross domain). Unless I’ve missed something?

Yes that’s right. But I saw you mentioned about background color particularly. You can style the background color of the outer div of the iframe, which is part of your website not discourse. And your embedded iframe will get that background color. I did that on my site. Edit: I read your OP too quickly, so it seems you are looking for change the font color of the iframe. I don’t know a easy way for that. But still you may try to change the iframe to some background color that fits both the site style and discourse font color, as a workaround.

At the moment, my idea is to attach the discourseEmbedClass idea as a class to the embedded element (basically, ) so the CSS can target this element w/o hacking at the actual embed code.

Well, I’ve made some headway, but could use a pointer if anyone is up for a little help. I can pass the param to the /javacripts/embed.js. My problem now is getting it to the iframe. Trying to set the iframe element during creation gets wiped out when iframe.src is set. Checking the source, it looks like it gets generated from /layouts/embed.html.erb I am not sure how to proceed in passing this value to the template to add as a class to the element. :frowning:

Ok, created PR for this. Hopefully it works and gets merged! https://github.com/discourse/discourse/pull/4850

I believe a better approach would be to: Update the embeddable_host table to add a custom class attribute Update the admin UI to allow input in that field Update the embed erb template to show that custom value I have security concerns otherwise with passing the value through on the client side. It’s a lot more work but I feel strongly it’s the better way to solve this issue. If it’s outside your realm of experience, maybe someone from the community could jump in and help you out?

Sweet merciful goodness I think I have something working. I have added the necessary column to :embeddable_hosts and updated the admin UI for inputting that field. (I am not sure what the naming convention for this file should be, I went with 20170505_add_embed_class_name_to_embeddable_hosts.rb). I just need to add the class_name to the embed erb template, but am not sure how to access it within the template. Any pointers? Ideally I’d like to add it to the tag of the embed as a class…

Embedding in more than one host

Development

Patrick_David (Pat David) 8 במאי,‏ 2017,‏ 5:58pm 14

With the help of @darix we’ve got a PR that works on my tests here using the embeddable_hosts model (per @eviltrout).

https://github.com/discourse/discourse/pull/4857

נושא		תגובות	צפיות
Style Embeds in Multiple Hosts Administrators how-to	0	1859	15 במאי,‏ 2017
Embed Discourse comments on another website via Javascript Integrations embedding , how-to	127	307409	2 ביוני,‏ 2026
How to customize appearance of discourse embeds? Product Support	4	1378	6 באוקטובר,‏ 2022
"Error Embedding" comments Product Support	16	2607	4 במאי,‏ 2022
Automatic dark mode for embedded comments as well? Feature embedding	17	2597	6 בנובמבר,‏ 2024

Embedding in more than one host

נושאים קשורים