Embedding streaming text with StreamText into your web pages

Embedding streaming text into your web pages

In order to embed streaming text into your website, you'll need to use an iframe that will point to the main streaming page on the StreamText website.  You can control the size and placement of the iframe to fit your circumstances.  You can also control what's available on the text player that's displayed by setting the source property of the iframe.  The following page lists the available control mechanisms.

 

Below are a few examples that will hopefully fit your circumstances.  If you'd like to see some additional samples, please feel free to submit a support ticket and tell us what you would like to accomplish.

Example #1
The following example is a full screen player that resizes when the user resizes their browser window.  It also passes all of the parameters from the page to the src attribute of the iframe, so your page can be invoked with all of the same query string parameters that are listed in the https://streamtext.zendesk.com/entries/21721966-controlling-the-streaming-text-page-display article.  Notice the "start" javascript function and how it updates the "src" attribute of the iframe to forward the query string values from the containing page.

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Integration Sample Page</title>
    <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"> </script>
    <script type="text/javascript">
        function hr() { $('stFrame').setStyle({ height: document.viewport.getHeight() + 'px' }); }
        function start() { $('stFrame').src = location.protocol + '//www.streamtext.net/player/' + location.search; hr(); }
        Event.observe(window, "resize", hr);
        document.observe('dom:loaded', start);
    </script>        
</head>
<body style="margin:0;">
    <iframe id="stFrame" style="width:100%"> </iframe>
</body>
</html>

Example #2
This next example shows the setting of the iframe size to an absolute value and also locking in the query string parameters to the main player page.  Notice the "src" attribute of the iframe tag and how chat has been disabled in this example and the event name is locked to IHaveADream.

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Integration Sample Page</title>
</head>
<body style="margin:0;">
    Content before
    <iframe id="stFrame" src="//www.streamtext.net/player/?event=IHaveADream&chat=false" style="width:400px;height:500px"> </iframe>
    Content after
</body>
</html>

Getting Support

 

Phone: (608)-234-4759 
Email: support@streamtext.net
 
Last Update: April 5th, 2016
Have more questions? Submit a request

1 Comments

  • 0
    Avatar
    Gayl Hardeman

    Very helpful for the client.  Thank you.  Gayl

Please sign in to leave a comment.
Powered by Zendesk