Embed Project Workplace

Quick Start Guide

Integrating PWP with your website or internal tool is pretty simple:

  1. Create an <iframe> that points to thePWP website.
  2. Update the hash fragment to show different pages.
  3. Update the hash fragment to show different pages.
  4. Use HTML5s postMessage to respond to navigation.

Heres a quick example. Read on for more detailed information.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Site</title>
        <script>
            // The PWP app will use window.postMessage to send events to the
            // outer site, allowing you to respond to what's happening.
            window.addEventListener('message', function(event) {
                console.log(event.data);
            }, false);
        </script>
    </head>
  <body>
      <iframe src="http://www.cisco.com/c/dam/assets/sol/tp/project-workplace/">
      </iframe>
  </body>
</html>

Integration methods

There are a couple of use cases that may be important in an integration:

  1. Change what's being shown inside the frame from the outer site.
  2. Change what's on the outside site based on actions inside the frame.

It's important to consider what you'll need, since #1 is much simpler than #2, though both are straight-forward. The next sections will go through each of these scenarios.

1. Change the content of the frame

Changing whats being shown inside the frame is as simple as changing the src attribute of the iframe element using JS. As PWP is a single page web app, it uses the hash fragment for navigation. Changing the hash will change which page is being shown.

Use the web app to find the hash locations of different pages. At the moment, you can only link to the home page, scenario pages, actions and blueprints, not specific tags, popups or far-end images. Here are some examples of different hash values:

...index.html#/                      // The home page
...index.html#/scenario/london/1/0   // Meeting room, size 1 (7p),  action 0 (default image)
...index.html#/scenario/london/2/2   // Meeting room, size 2 (10p), action 2 (project update)
...index.html#/scenario/london/2/4   // Meeting room, size 2 (10p), action 4 (blueprint)

2. Respond to navigation inside the frame

Since we're using an iframe across domains, you can't simply access its contents to see what the current URL is, or see when it changes. For that, we need to use HTML5's postMessage API. This API allows PWP to send messages to your outer site when the user navigates around the app.

To get postMessage data, listen for the "message" event on the outer site's window object. The event.data property will be a string that describes what just happened. Add the iframe and JS listener to your outside site, and navigate around inside the frame to see the different event data strings. Here are some example values:

Using these events, you'll be able to change what's being shown on the outside site, based on what the user is doing in the PWP app. Combined with the possibility of changing the source hash value of the frame, most use cases will be covered.

/                             // User navigated to the home page (or the page loaded)
/tag/4                        // User navigated to tag #4 on the home page (brainstorm)
/scenario/munich/0/0          // User navigated to a scenario (munich, size 0, action 0)
/scenario/munich/0/2          // User navigated to a scenario (munich, size 0, action 2)
/scenario/munich/0/2/farend   // User navigated to a farend image (munich, size 0, action 2)