# Creating Third-party widgets

**URL:** <https://discuss.emberjs.com/t/creating-third-party-widgets/5358>\
**Category:** Uncategorized\
**Created:** [May 22, 2014, 6:12am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358 "2014-05-22T06:12:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ramontayag](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ramontayag/32/15833_2.png) [@ramontayag](https://discuss.emberjs.com/u/ramontayag)\
**Post date:** [May 22, 2014, 6:12am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/1 "2014-05-22T06:12:03Z")

</div>

I’m exploring writing a third-party javascript widget using Ember. I’m browsing through [Third-Party JavaScript](http://thirdpartyjs.com/) to get quickly get ideas of the caveats of making these widgets. There are a few caveats that have already jumped out at me if Ember is used.

I’m not done with the book yet, but the first caveat I see is Ember does not seem to have a `noConflict` version, where you could namespace Ember in something other than `Ember`. If `Ember` is already defined in the page, then including the widget will cause problems.

Is anyone creating / has anyone created Disqus-style widgets using Ember? What tips do you have?

Thanks

---

<div class="post-metadata">

**Author:** ![walter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/walter/32/14648_2.png) [@walter](https://discuss.emberjs.com/u/walter)\
**Post date:** [November 13, 2014, 1:51am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/2 "2014-11-13T01:51:23Z")

</div>

This is pretty old at this point, but I would recommend [ember-cli](http://ember-cli.com) and configuring `ENV.APP.rootElement` in `config/environment.js` as a starting point.

I think this should be sufficient to avoid conflicts (sort of the point of ES6 use in ember-cli), but I’m not that knowledgeable about it.

Having said that, I haven’t gotten very far in my own third party widget project yet. Will post back here if I have anything more to share about it.

---

<div class="post-metadata">

**Author:** ![walter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/walter/32/14648_2.png) [@walter](https://discuss.emberjs.com/u/walter)\
**Post date:** [November 14, 2014, 1:49am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/3 "2014-11-14T01:49:19Z")

</div>

I’ve had some, non-ideal, success with a proof-of-concept widget using Ember as developed and built with ember-cli.

Basically it boiled down to two things. I had to use an iframe to add it to the target page and specifying a `baseURL` in `config/environment.js` that matched where I was hosting it.

Here are the steps I used on the app after it was developed:

1. edit value of `ENV.baseURL` in `config/environment.js` to be the path to your target directory where it will be hosted
2. `ember build --environment production --output-path your_target_dir`
3. `cp -r your_target_dir path/to/hosted/dir/parent/`
4. add `<iframe src="http://your_host/your_target_dir/"`… iframe tag to target HTML page

Yeah, pretty simple and what you would expect.

However, I had hoped to avoid using an iframe for the Ember app for a couple reasons:

- would be great if the widget could inherit styles
- secondary interactions within the Ember app would have better UX with a modal on the parent window

When I tried to just change `rootElement` and use some wrapping JS to include the necessary vendor and app css and js files, I couldn’t get it to work. I’ll start a separate topic on that.

---

<div class="post-metadata">

**Author:** ![ramontayag](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/ramontayag/32/15833_2.png) [@ramontayag](https://discuss.emberjs.com/u/ramontayag)\
**Post date:** [November 18, 2014, 12:54am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/4 "2014-11-18T00:54:57Z")

</div>

This is great. Thanks Walter. I haven't read everything yet but this will be useful to me and others.

---

<div class="post-metadata">

**Author:** ![walter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/walter/32/14648_2.png) [@walter](https://discuss.emberjs.com/u/walter)\
**Post date:** [November 18, 2014, 1:37am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/5 "2014-11-18T01:37:30Z")

</div>

I’ve now got a jQuery based loader script that successfully adds a ember-cli based application to the calling window. I.e. a third party widget not wrapped in an iframe.

In `config/environment.js`, I change `ENV.locationType` to `none` and take out `ENV.baseURL` as it will be unneeded. See [Location - 4.6 - Ember API Documentation](http://emberjs.com/api/classes/Ember.Location.html) for backtground (thx @abuiles).

Then I use jQuery to do the following:

- add the CSS files I need to head if not already present (needs to match exact file names from built ember-cli app as copied into place)
- add container div to DOM (should match `ENV.APP.rootElement` in `config/environment.js`)
- add meta tag to head for app configuration (should be based on what you have in the head of `index.html` in your build)
- add the JS files (vender and your\_app, exact file names as with CSS) to DOM after container div

The remaining problem I have is I need to be able instantiate multiple instances of the ember-cli app under different containing divs.

My jQuery loader script can handle tracking of instances and adding the container divs, etc, but I’m not sure how to spin up a different instance of the app from the default. This is what I’ll ask about in a new topic.

---

<div class="post-metadata">

**Author:** ![walter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/walter/32/14648_2.png) [@walter](https://discuss.emberjs.com/u/walter)\
**Post date:** [November 18, 2014, 1:54am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/6 "2014-11-18T01:54:21Z")

</div>

Here’s a gist with the interesting bits of the proof of concept.

[https://gist.github.com/walter/afecb3b2b1b24246acb3](https://gist.github.com/walter/afecb3b2b1b24246acb3)

---

<div class="post-metadata">

**Author:** ![walter](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/walter/32/14648_2.png) [@walter](https://discuss.emberjs.com/u/walter)\
**Post date:** [March 12, 2015, 5:38am UTC](https://discuss.emberjs.com/t/creating-third-party-widgets/5358/7 "2015-03-12T05:38:07Z")

</div>

I updated [How to have multiple instances of an app in same window](http://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733) with example code and rough write up.