Integrating the iframe

To add an Important To Me (ITM) bar to your Connections component in an iframe, follow these steps.

About this task

To complete this task, you need to edit the HTML source for your component page.

Procedure

Add itmBootstrap.js to your page with a <script/> element.
For example:
```
<script src="/social/itm/itmBootstrap.js"></script>
```
Add the DOM element in which the ITM bar will render.
For example:
<div id="itm_root"></div>
Add a script element to your page, and create an ITM configuration object variable, for use by the function that creates the ITM bar.
For example:
```
var itmConfig = {
  rtl: false,
  appRegistry: true,
  locale: en
};
```
For complete information about the configuration object, see "Important To Me bar reference".
Create an onLoaded callback function, for use by the function that creates the ITM bar.
For example:
```
function onLoaded(itmRef) {
  itmBar = itmRef;
  itmBar.callMethod('addStaticHeadEntries', [genGloablEntry()]);
  itmBar.addEventListener('onEntrySelected', onEntrySelected);
  itmBar.addEventListener('onAction', onActionSelected);
}
```
The onLoaded callback function is invoked once the ITM bar is initialized. An ITM bar reference is passed in as the callback function parameter. Keep the reference in the Host app, since it is used to manipulate the ITM bar.
In addition to receiving the ITM bar reference, the onLoaded callback function can perform more initialization tasks, such as adding a global entry or adding a listener for ITM events.

Create the ITM bar by calling lconn.itm.client.itmFactory.create(), defined in itmBootstrap.

lconn.itm.client.itmFactory.create(config, onLoaded, node);
//config is the itm configuration object mentioned above.
//onLoaded is the callback function mentioned above.
//node is either the DOM node to contain the ITM bar or the id of the container.

Example

A sample host page with an embedded ITM iframe is here: https://github.ibm.com/connections/itm-web-client/blob/master/demo/parent.html

To run it, follow these steps.

Download the ITM web client project from https://github.ibm.com/connections/it-web-client.
Run npm install.
Run npm run build:applite.
Run npm run start:test.
Open a browser and visit http://localhost:3001/parent.

What to do next

Once you have created the ITM bar, you can use itmRef to perform tasks like getting a list of entries or setting the status of an entry.