# How to have multiple instances of an app in same window

**URL:** <https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733>\
**Category:** Ember CLI\
**Created:** [November 18, 2014, 2:08am UTC](https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733 "2014-11-18T02:08:25Z")\
**Posts on this page:** 4\
**Page:** 1

<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, 2:08am UTC](https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733/1 "2014-11-18T02:08:25Z")

</div>

I want to create an Ember based widget that I can give to partners of my project to embed on their sites.

I’ve got a proof of concept working as noted here:

> [@Creating Third-party widgets](http://discuss.emberjs.com/t/creating-third-party-widgets/5358/5):
>
> 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 e…

A good start, but I also want it to be possible to have multiple instances of the Ember.js app running in a given window from different `rootElement` divs and with some other different passed in values.

Any suggestions?

---

<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:** [February 9, 2015, 10:20pm UTC](https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733/2 "2015-02-09T22:20:56Z")

</div>

I’ve got this working and will be writing up my approach. Expect blog post about it before long.

---

<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:37am UTC](https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733/3 "2015-03-12T05:37:13Z")

</div>

I don’t have a blog post yet, but I do have some example open source code that is working in the wild (couple css rough spots at the moment, but hopefully sorted out soon).

The ember-cli based Ember app is here:

> **[GitHub - opengovernment/address-widget: An Ember.js app that allows users to...](https://github.com/opengovernment/address-widget)**
>
> An Ember.js app that allows users to look up their elected officials and ask a question on AskThem.io - GitHub - opengovernment/address-widget: An Ember.js app that allows users to look up their el...

The README is a decent preview of how things are wired together. It takes advantage of two key addons:

[https://github.com/walter/ember-cli-make-concoction](https://github.com/walter/ember-cli-make-concoction) # this is what allows the jQuery widget loader to create unique instances of the address-widget Ember app

[https://github.com/walter/ember-cli-meta-options](https://github.com/walter/ember-cli-meta-options) # allows for passing settings to an Ember app, in my case the jQuery loader handles putting the settings in place as meta tags

Here is jQuery loader itself:

[https://github.com/opengovernment/askthem/blob/master/public/widgets/address/widget.js](https://github.com/opengovernment/askthem/blob/master/public/widgets/address/widget.js) # check the README in the same directory for prep details

Finally the embedded code looks like this:

```nohighlight
<script class="at-widget-loader" src="http://www.askthem.io/widgets/address/widget.js" data-headline="Ask your elected officials a question" type="text/javascript" async></script>

```

or a more elaborate example:

```nohighlight
<script class="at-widget-loader" src="http://www.askthem.io/widgets/address/widget.js" data-tag-id="at-zip-example" type="text/javascript" async></script>

<div style="display: none;" data-tag-id="at-zip-example" class="at-widget-attributes"> <div class="headline">Custom Headline</div> <div class="question-summary">Custom Summary with <b>HTML!</b></div> <div class="question-body">custom body</div> </div>

```

There is a fair bit you need to do with getting CORS in place to allow this stuff to work as well. I found this helpful:

[http://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/](http://benjaminhorn.io/code/setting-cors-cross-origin-resource-sharing-on-apache-with-correct-response-headers-allowing-everything-through/)

You also need to go through your config/environment.js CORS stuff and add all the sources of your images, fonts, scripts, etc.

That will have to do for now. Feel free to ask questions here.

---

<div class="post-metadata">

**Author:** ![kennethkalmer](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/kennethkalmer/32/15383_2.png) [@kennethkalmer](https://discuss.emberjs.com/u/kennethkalmer)\
**Post date:** [April 24, 2015, 12:28pm UTC](https://discuss.emberjs.com/t/how-to-have-multiple-instances-of-an-app-in-same-window/6733/4 "2015-04-24T12:28:02Z")

</div>

Thanks for sharing your experiences here. I’ve been thinking through an implementation where I could extract components from an bigger Ember application and place them selectively on a public marketing pages as demo widgets.

For the sake of explanation, imagine a super weather service that requires a subscription to access. But on the sales site you’d want a “enter your zipcode” and show an actual component from the live application doing its thing, that it can in fact do what it says on the tin… _Hope the ridiculousness doesn’t deter from the end goal here._ Getting the component to behave slightly different is easily tweaked with feature flags, it is the deployment story I was curious about.

Basically I want the marketing pages to be separate mini-sites that be driven by sales & marketing, and isolate the application from that kind of volatility, but at the same time selectively show off bits and pieces (via components) to the public.

I’ll give this a go in a week or two when I get there, on to the next planning steps.