Cobot supports embedding your own HTML add-ons into the Cobot UI. To add a link to Cobot, create navigation link via the corresponding endpoint. When a user clicks the link, Cobot will display an iFrame pointing to your web app's URL.

iFrame width

iFrames are a little less wide than the window, growing and shrinking with it.

Handling vertical iframe resizing

To avoid scroll bars around your iFrames, should your content get too long, you have to tell Cobot the height of your page, so it can adjust the iFrame height accordingly.

You have to do this using JavaScript, which you should run after every page load, or - for singe page apps - every time the height of your document changes.

To obtain the height of the document, you can call:

var height = document.body.clientHeight;

To send it to Cobot:

window.parent.postMessage(JSON.stringify({frameHeight: height}), '*');

Please note that you have to re-post the height every time the content on your page changes. So if you are running any JavaScript code on your page that alters the content, you have to trigger a resize each time.

If you are using Ruby (on Rails), our client gem includes a resize script. See the Readme for instructions.

Scrolling up

If your iframe content changes from something very long to something very short, the user will end up with the page scrolled all the way down. To prevent that from happening, send Cobot a scrollUp message and it will scroll the page all the way up:

window.parent.postMessage(JSON.stringify({scrollUp: true}), '*');

Handling scroll position

If your web app opens modals or similar elements, the vertical position of these elements has to be adjusted according to the scroll position of the parent window. Otherwise, your modals might open at a position not currently visible.

Cobot constantly sends your iFrames scroll position to it. To receive the data, you have to add an event listener:

window.addEventListener('message', function(message) {
  try {
    var data = JSON.parse(message.data);
    var scrollTop = data.scrollTop;
  } catch(e) {
    // invalid json
  }
}, false);

scrollTop is 0 while your iFrame's top part is visible. When the user scrolls down, it represents the number of pixels that have moved up, outside of the viewport.