# Using Ember in an existing website (Newbie)

**URL:** <https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213>\
**Category:** Uncategorized\
**Created:** [February 19, 2014, 8:10pm UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213 "2014-02-19T20:10:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![carltongibson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/carltongibson/32/15525_2.png) [@carltongibson](https://discuss.emberjs.com/u/carltongibson)\
**Post date:** [February 19, 2014, 8:10pm UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213/1 "2014-02-19T20:10:33Z")

</div>

Hi there,

As per the subject, I’m getting started with Ember.js. I’ve gone through a number of examples and tutorials and such. All in all I’m very impressed; there’s just so much to like.

The thing I’d like to do is integrate Ember into an existing site —&nbsp;on a widget-by-widget basis if you will. From what I can see this doesn’t fit the Ember model — but I’m thinking **surely** it must be doable.

The closest I’ve come is this talk from the Ember London meet up [http://vimeo.com/86698279](http://vimeo.com/86698279) — Here you can see a technique to pull a single View from Ember using the ` __container__ ` API and attaching it the DOM with appendTo.

Is there any good way of having multiple Ember “widgets” on a single page? —&nbsp;Is having multiple apps feasible? (I’m wondering about the singleton nature of a lot of the classes being an issue.)

Thanks for helping me learn here!

---

<div class="post-metadata">

**Author:** ![knownasilya](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/knownasilya/32/12912_2.png) [@knownasilya](https://discuss.emberjs.com/u/knownasilya)\
**Post date:** [February 19, 2014, 9:37pm UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213/2 "2014-02-19T21:37:43Z")

</div>

Multiple apps are feasible, you can use `App.rootElement` to specify where you attach an Ember app on the page. So instead of attaching to the `body`, you attach multiple apps to different elements. From there you can use `Ember.Component` and templates to create widgets.

---

<div class="post-metadata">

**Author:** ![carltongibson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/carltongibson/32/15525_2.png) [@carltongibson](https://discuss.emberjs.com/u/carltongibson)\
**Post date:** [February 21, 2014, 9:02am UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213/3 "2014-02-21T09:02:36Z")

</div>

Ok —&nbsp;thanks! I’ve had a little play and that seems to work. No doubt I’ll discover the problems as I go. 😄

---

<div class="post-metadata">

**Author:** ![bgrimes](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bgrimes/32/14837_2.png) [@bgrimes](https://discuss.emberjs.com/u/bgrimes)\
**Post date:** [February 23, 2014, 1:33am UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213/4 "2014-02-23T01:33:14Z")

</div>

This is the way I approached integrating Ember into an existing large site as well! Just keep in mind if you are using separate Ember applications on the same page then you will need to namespace your templates and extend the DefaultResolver to make it aware of this. If you do not namespace your templates then any name collisions (I’m looking at you, ‘application’) will be overwritten by the last entry on the page (or in the compiled map if you are using the handlebars compiler).

```
var App = Em.Application.create({    
    // ...
    Resolver: Ember.DefaultResolver.extend({
        resolveTemplate: function(parsedName) {
            var namespace = 'whateverNamespace/';
            parsedName.fullNameWithoutType = namespace + parsedName.fullNameWithoutType;
            return this._super(parsedName);
        }
    }),
    // ...
});

```

This way you define your templates with template-name=“whateverNamespace/application” and not have to worry about collisions. And for bonus points, the above can be written as a mixin to use in your application instantiation 😄.

---

<div class="post-metadata">

**Author:** ![carltongibson](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/carltongibson/32/15525_2.png) [@carltongibson](https://discuss.emberjs.com/u/carltongibson)\
**Post date:** [February 25, 2014, 8:25am UTC](https://discuss.emberjs.com/t/using-ember-in-an-existing-website-newbie/4213/5 "2014-02-25T08:25:01Z")

</div>

That’s really handy! Thanks.