# Embedding in more than one host
**URL:** https://meta.discourse.org/t/embedding-in-more-than-one-host/62002
**Category:** Development
**Created:** [2 Mayo, 2017 22:00 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002 "2017-05-02T22:00:21Z")
**Posts on this page:** 16
**Page:** 1
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [2 Mayo, 2017 22:00 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/1 "2017-05-02T22:00:21Z")
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](http://pixls.us) and [digikam.org](http://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. 🙂
Is there some neat answer I’m missing for setting a CSS style rule that will match one and not the other?
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [3 Mayo, 2017 02:36 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/2 "2017-05-03T02:36:42Z")
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?
```plaintext
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?
---
### Author:  [@gdpelican](https://meta.discourse.org/u/gdpelican)
#### Post date: [3 Mayo, 2017 02:44 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/3 "2017-05-03T02:44:34Z")
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.
---
### Author:  [@kraml](https://meta.discourse.org/u/kraml)
#### Post date: [3 Mayo, 2017 05:33 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/4 "2017-05-03T05:33:47Z")
Why don’t you just style the embedded iframe from your sites’ css?
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [3 Mayo, 2017 11:50 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/5 "2017-05-03T11:50:29Z")
> [@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?
---
### Author:  [@kraml](https://meta.discourse.org/u/kraml)
#### Post date: [3 Mayo, 2017 12:42 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/6 "2017-05-03T12:42:08Z")
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.
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [3 Mayo, 2017 15:38 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/7 "2017-05-03T15:38:04Z")
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.
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [3 Mayo, 2017 17:45 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/8 "2017-05-03T17:45:04Z")
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. ☹
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [3 Mayo, 2017 19:08 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/9 "2017-05-03T19:08:52Z")
Ok, created PR for this. Hopefully it works and gets merged!
[https://github.com/discourse/discourse/pull/4850](https://github.com/discourse/discourse/pull/4850)
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [3 Mayo, 2017 22:04 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/10 "2017-05-03T22:04:49Z")
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?
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [5 Mayo, 2017 18:20 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/11 "2017-05-05T18:20:21Z")
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…
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [5 Mayo, 2017 22:20 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/12 "2017-05-05T22:20:14Z")
If anyone gets a chance to check this, that would be awesome. 🙂
```diff
From 4f1c0b97eafd6b0351d27689f5fad544d935b3ca Mon Sep 17 00:00:00 2001
From: Pat David
Date: Fri, 5 May 2017 18:08:18 -0400
Subject: [PATCH] Add embed class name setup for embeddable hosts
---
app/assets/javascripts/admin/components/embeddable-host.js.es6 | 2 +-
.../javascripts/admin/templates/components/embeddable-host.hbs | 4 ++++
app/assets/javascripts/admin/templates/embedding.hbs | 7 ++++---
app/controllers/admin/embeddable_hosts_controller.rb | 1 +
app/models/embeddable_host.rb | 1 +
app/serializers/embeddable_host_serializer.rb | 2 +-
config/locales/client.en.yml | 1 +
db/migrate/20170505_add_embed_class_name_to_embeddable_hosts.rb | 5 +++++
8 files changed, 18 insertions(+), 5 deletions(-)
create mode 100644 db/migrate/20170505_add_embed_class_name_to_embeddable_hosts.rb
diff --git a/app/assets/javascripts/admin/components/embeddable-host.js.es6 b/app/assets/javascripts/admin/components/embeddable-host.js.es6
index 2a5d7c0..70c1ed2 100644
--- a/app/assets/javascripts/admin/components/embeddable-host.js.es6
+++ b/app/assets/javascripts/admin/components/embeddable-host.js.es6
@@ -30,7 +30,7 @@ export default Ember.Component.extend(bufferedProperty('host'), {
save() {
if (this.get('cantSave')) { return; }
- const props = this.get('buffered').getProperties('host', 'path_whitelist');
+ const props = this.get('buffered').getProperties('host', 'path_whitelist', 'class_name');
props.category_id = this.get('categoryId');
const host = this.get('host');
diff --git a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
index 5f25811..f4367ab 100644
--- a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
@@ -2,6 +2,9 @@
{{input value=buffered.host placeholder="example.com" enter="save" class="host-name"}}
|
+
+ {{input value=buffered.class_name placeholder="class" enter="save" class="class-name"}}
+ |
{{input value=buffered.path_whitelist placeholder="/blog/.*" enter="save" class="path-whitelist"}}
|
@@ -14,6 +17,7 @@
{{else}}
{{host.host}} |
+ {{host.class_name}} |
{{host.path_whitelist}} |
{{category-badge host.category}} |
diff --git a/app/assets/javascripts/admin/templates/embedding.hbs b/app/assets/javascripts/admin/templates/embedding.hbs
index 5db5cb6..bddcd76 100644
--- a/app/assets/javascripts/admin/templates/embedding.hbs
+++ b/app/assets/javascripts/admin/templates/embedding.hbs
@@ -2,9 +2,10 @@
{{#if embedding.embeddable_hosts}}
- | {{i18n "admin.embedding.host"}} |
- {{i18n "admin.embedding.path_whitelist"}} |
- {{i18n "admin.embedding.category"}} |
+ {{i18n "admin.embedding.host"}} |
+ {{i18n "admin.embedding.class_name"}} |
+ {{i18n "admin.embedding.path_whitelist"}} |
+ {{i18n "admin.embedding.category"}} |
|
{{#each embedding.embeddable_hosts as |host|}}
diff --git a/app/controllers/admin/embeddable_hosts_controller.rb b/app/controllers/admin/embeddable_hosts_controller.rb
index 7f15c9f..60d24a3 100644
--- a/app/controllers/admin/embeddable_hosts_controller.rb
+++ b/app/controllers/admin/embeddable_hosts_controller.rb
@@ -22,6 +22,7 @@ class Admin::EmbeddableHostsController < Admin::AdminController
def save_host(host)
host.host = params[:embeddable_host][:host]
host.path_whitelist = params[:embeddable_host][:path_whitelist]
+ host.class_name = params[:embeddable_host][:class_name]
host.category_id = params[:embeddable_host][:category_id]
host.category_id = SiteSetting.uncategorized_category_id if host.category_id.blank?
diff --git a/app/models/embeddable_host.rb b/app/models/embeddable_host.rb
index 1bcd29a..e87623a 100644
--- a/app/models/embeddable_host.rb
+++ b/app/models/embeddable_host.rb
@@ -57,4 +57,5 @@ end
# created_at :datetime
# updated_at :datetime
# path_whitelist :string
+# class_name :string
#
diff --git a/app/serializers/embeddable_host_serializer.rb b/app/serializers/embeddable_host_serializer.rb
index 61cf16e..e99ce6d 100644
--- a/app/serializers/embeddable_host_serializer.rb
+++ b/app/serializers/embeddable_host_serializer.rb
@@ -1,6 +1,6 @@
class EmbeddableHostSerializer < ApplicationSerializer
- TO_SERIALIZE = [:id, :host, :path_whitelist, :category_id]
+ TO_SERIALIZE = [:id, :host, :path_whitelist, :class_name, :category_id]
attributes *TO_SERIALIZE
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0d2c312..9e1a617 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3454,6 +3454,7 @@ en:
sample: "Use the following HTML code into your site to create and embed discourse topics. Replace REPLACE_ME with the canonical URL of the page you are embedding it on."
title: "Embedding"
host: "Allowed Hosts"
+ class_name: "Class Name"
path_whitelist: "Path Whitelist"
edit: "edit"
category: "Post to Category"
diff --git a/db/migrate/20170505_add_embed_class_name_to_embeddable_hosts.rb b/db/migrate/20170505_add_embed_class_name_to_embeddable_hosts.rb
new file mode 100644
index 0000000..a2f6c5e
--- /dev/null
+++ b/db/migrate/20170505_add_embed_class_name_to_embeddable_hosts.rb
@@ -0,0 +1,5 @@
+class AddEmbedClassNameToEmbeddableHosts < ActiveRecord::Migration
+ def change
+ add_column :embeddable_hosts, :class_name, :string
+ end
+end
--
2.7.4
```
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [8 Mayo, 2017 17:58 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/14 "2017-05-08T17:58:43Z")
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](https://github.com/discourse/discourse/pull/4857)
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [11 Mayo, 2017 15:49 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/15 "2017-05-11T15:49:31Z")
Just an update and a request, if anyone might be able to help.
The patch works and merges fine, but @eviltrout wanted me to add a controller spec that checks for class\_name in the record being viewed, and assigns the `embeddable_css_class` variable for embedding in the template.
I am not having any luck getting it to work despite a great pointer to exactly where I should be looking:
>
>
> I can give you a strong hint here. If it's not enough posting on meta might be a… good idea!
>
> Basically, in \*\*spec/controllers/embed\_controller\_spec.rb\*\* you could modify one of the records that are created in the \`"with multiple hosts"\` \`before\` block to include the class name attribute.
>
> Then in the \`it\` block after the \`get\` has executed, you can add a new line like:
>
> \`\`\`ruby
> expect(assigns(:embeddable\_css\_class)).to eq('what it should equal')
> \`\`\`
I have modified **spec/controllers/embed\_controller\_spec.rb** down in the context `"with multiple hosts"` so the last call to Fabricator should include a class\_name:
```plaintext
...
Fabricate(:embeddable_host, host: 'https://example.com', class_name: 'example')
```
Following @eviltrout’s guidance, I then added a new test to check, but this is not working. ☹
```plaintext
it "contains custom class name" do
controller.request.stubs(:referer).returns("https://example.com/some-other-path")
get :comments, embed_url: embed_url
expect(assigns(:embeddable_css_class)).to eq('example')
end
```
I’m apologize if I’m a little dense, but I could really use a hand here figuring out how to get this last bit working.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [11 Mayo, 2017 17:09 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/16 "2017-05-11T17:09:34Z")
What is the test failure you’re seeing?
---
### Author:  [@Patrick\_David](https://meta.discourse.org/u/Patrick_David)
#### Post date: [11 Mayo, 2017 18:14 UTC](https://meta.discourse.org/t/embedding-in-more-than-one-host/62002/17 "2017-05-11T18:14:56Z")
I was just going to answer you with a paste of the failure log, and it’s working. 😕
So, it’s working. 🎉
Thank you very much for all the help (and patience)!
|