diff --git a/public/index.html b/public/index.html
index 8a25eaf..91d3081 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,5 +51,9 @@
     function openInCbox(url){
       alert('Would have opened in colorbox on server: ' + url);
     }
+    initTemplateBrowser({
+      divId: 'root',
+      
+    })
   </script>
 </html>
diff --git a/specs/features/users-can-open-templates.spec.js b/specs/features/users-can-open-templates.spec.js
new file mode 100644
index 0000000..b0dfc41
--- /dev/null
+++ b/specs/features/users-can-open-templates.spec.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Browser from '../../src/components/Browser';
+import create from '../spec-helpers';
+
+describe('Feature: Users can open templates', () => {
+  it('calls the attached function with expected params', () => {
+    const templates = [ 
+      create('template', {id: 23, type: 'TextOnly'})
+    ];
+    const openTemplate = jest.fn( () => {} );
+    const app = mount(<Browser templates={templates} onTemplateOpen={ openTemplate } />);
+    
+    app.find('Template').simulate('click');
+
+    expect(openTemplate.mock.calls[0]).toEqual([23, 'TextOnly']);
+  });
+
+});
diff --git a/src/components/Browser.js b/src/components/Browser.js
index cc1b451..c7d6da2 100644
--- a/src/components/Browser.js
+++ b/src/components/Browser.js
@@ -77,7 +77,12 @@ class Browser extends Component {
   render() {
     const tags = this.getTags();
     const filteredTemplates = this.getFilteredTemplates().map( (template, i) => {
-      return(<Template key={`template-item-${i}`} template={ template } options={ this.state.templateOptions } />);
+      return(
+        <Template key={`template-item-${i}`}
+          template={ template }
+          openTemplate={ this.props.onTemplateOpen }
+          options={ this.state.templateOptions } />
+      );
     });
     const page = this.state.page || 1;
     const templates = PaginationPane.paginate(filteredTemplates, page)
diff --git a/src/components/Template.js b/src/components/Template.js
index 123757c..389d496 100644
--- a/src/components/Template.js
+++ b/src/components/Template.js
@@ -3,7 +3,6 @@ import TemplateFeatures from './TemplateFeatures';
 import LoadingSpinner from './LoadingSpinner';
 import hoverIntent from 'hoverintent';
 import { padLeft } from '../helpers/StringHelpers';
-import { openTemplateEditorUrl } from '../helpers/ExternalServices';
 import './Template.css';
 
 class Template extends Component {
@@ -45,7 +44,10 @@ class Template extends Component {
 
   handleClickOnTemplate (e) {
     e.preventDefault();
-    openTemplateEditorUrl( this.createLink() );
+    this.props.openTemplate(
+      this.props.template.id,
+      this.props.template.type
+    )
   }
 
   handleHoverOn () {
diff --git a/src/helpers/ExternalServices.js b/src/helpers/ExternalServices.js
deleted file mode 100644
index 42d923d..0000000
--- a/src/helpers/ExternalServices.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function openTemplateEditorUrl (url) {
-  window.openInCbox(url);
-}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 9bb4ab0..4d7895c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,7 +4,19 @@ import Browser from './components/Browser';
 
 let templates = require('./stores/live-data-faker').default;
 
-ReactDOM.render(
-  <Browser templates={ templates } />,
-  document.getElementById('root')
-);
+/*
+  Required options:
+    divId: (string) id of the div that will house the browser
+    onTemplateOpen: (function(templateId)) function to call when opening a template it
+      will recieve the following:
+        templateId: (int) the id of the template opened
+        templateTypeString: (string) the type of template. Eg: 'TextOnly'
+*/
+function initTemplateBrowser (options) {
+  ReactDOM.render(
+    <Browser templates={ templates } />,
+    document.getElementById(options.divId)
+  );
+}
+
+window.initTemplateBrowser = initTemplateBrowser;
\ No newline at end of file