Embedding Runscope Content

Runscope provides an easy way to embed request data in applications using the Runscope API. Embedding content requires the following steps to be taken:

  1. Create an OAuth application.
  2. Generate an access_token for the user whose data you want to embed. For testing purposes you can use the access token that was autogenerated for you when creating the OAuth application. For user data, send them through the Web Application Flow.
  3. Place the embed HTML into your application.
  4. Generate a Client Token and write it out to the page using a server-side framework.

Stream View

Any bucket stream is available to be embedded. You'll need a valid Runscope Client Token with "/embedded/stream" and "/embedded/stream_data" as allowed paths for the token. In order to embed, simply copy the javascript bellow and set the clientToken to the generated to client token and a DOM element ID in which to embed the stream as elementId:

<script type="text/javascript" src="https://static.runscope.com/runscope.js"></script>
<script>
  var opts = {
    elementId: "DOMElementId",
    clientToken: "your_token_goes_here",
  };
  Runscope.showStream(opts);
</script>

Embedded streams offer the following configuration options:

Parameter Description Required? Default
elementId A DOM element's ID in which to embed the stream. required
clientToken A valid Runscope Client Token. required
width The width of the embedded stream element in pixels. optional 500
height The height of the embedded stream element in pixels. optional 500
title A title for the top of the embedded stream view. optional "Stream"
stream The stream of data to embed, it must be one of: 'all', 'errors', 'captures' or 'shared'. optional 'all'
autoUpdate A switch to enable automatic updates of stream in real time. This has no effect on the 'shared' stream. optional false

Message View

Shared Messages

You can quickly and securely embed any publicly shared Runscope message. After you click on the Create Share Link, click on the Embed Request link to show the code to embed. Copy the code and embed on any page you want.

<div id="runscopeShared"></div>
<script type="text/javascript" src="https://static.runscope.com/runscope.js"></script>
<script>
  var opts = {
    elementId: "runscopeShared",
    teamId: "your_provided_team_id",
    shareToken: "your_provided_share_token"
  };
  Runscope.showMessage(opts);
</script>

You can add or alter any of the options below in the embedded code's opts object to customize the display of your message. If you are using the generated code, do not alter the messageId or team properties or the embedded message will not render properly.

Embedded public messages offer the following configuration options:

Parameter Description Required? Default
elementId A DOM element's ID in which to embed the message. required runscopeShared
width The width of the embedded message element in pixels. optional 500
height The height of the embedded message element in pixels. optional 500
title A title for the top of the embedded message view. optional The hostname of the request

Private Messages

Any individual message can be embedded. In order to embed you'll need the value of the Runscope-Message-Id header in the message details and a valid Runscope Client Token with "/embedded/message" as an allowed path. Set the clientToken parameter to your token, messageId to your message's id, and elementId to a DOM element ID in which to embed the message.

<script type="text/javascript" src="https://static.runscope.com/runscope.js"></script>
<script>
  var opts = {
    elementId: "someElementId",
    clientToken: "your_token_goes_here",
    messageId: "your_message_id"
  };
  Runscope.showMessage(opts);
</script>

Embedded private messages offer the following configuration options:

Parameter Description Required? Default
elementId A DOM element's ID in which to embed the message. required
clientToken A valid Runscope Client Token. required
width The width of the embedded message element in pixels. optional 500
height The height of the embedded message element in pixels. optional 500
title A title for the top of the embedded message view. optional The hostname of the request