StreamText.Net, Inc. Customer Portal Language
 
HomeKnowledge BaseGeneralEmbedding streaming text into your web pages
Information
Article ID7
Created On10/25/2008
Modified3/18/2009
Share With Others
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.

http://support.streamtext.net/KB/a8/controlling-the-streaming-text-page-display.aspx

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 and we'll work with you directly and may post your's as an example to this page.

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 http://support.streamtext.net/KB/a8/controlling-the-streaming-text-page-display.aspx page.  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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Integration Sample Page</title>
    <script language="javascript" type="text/javascript" src="http://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/text.aspx' + 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%" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px">
    </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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Integration Sample Page</title>
</head>
<body style="margin:0;">
    Content before
    <iframe id="stFrame" src="http://www.streamtext.net/text.aspx?event=IHaveADream&chat=false" style="width:400px;height:500px" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px">
    </iframe>
    Content after
</body>
</html>

Getting Support

Phone: 608-206-5497
Email: support@streamtext.net