Embedding streaming text into your web pages
In order to embed streaming text into your website, you have the option of using a simple `iframe` based integration where the user controls are provided by the StreamText player, or you can create your own custom user experience where you own the controls and use JavaScript to update the StreamText player.
Simple iframe based integration
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 by setting the source property of the `iframe`. The following page lists the available control mechanisms available when setting the source property of the `iframe`.
Below are a couple 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 `iframe` integration with fixed name and size
This 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.
Email: support@streamtext.net
Below are a couple 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 `iframe` integration
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Company Streaming Text</title>
<style>
html, body, div, iframe { display: flex; }
html, body { margin: 0; padding: 0; flex-direction: column; height: 100vh }
iframe { flex-grow: 1; border: 0 }
h1 { flex-grow: 1; text-align: center; }
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("streaming").src = "//www.streamtext.net/player" + document.location.search;
});
</script>
</head>
<body>
<div id="header">
<img id="branding" src="https://via.placeholder.com/150x25.png?text=Company+Logo" />
<h1>My Custom Streaming Page</h1>
</div>
<iframe id="streaming"> </iframe>
</body>
</html>
Example `iframe` integration with fixed name and size
This 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 lang="en">
<head>
<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>
Fully customized user experience
We provide a way to embed the player in a way where you provide the user controls and therefore can fully customize the experience. In order to achieve this, you will communicate with the StreamText player using the `window.postMessage` JavaScript API available in all browsers. This is a link to a very basic working example. If you are interested in this approach, your integration will definitely look better than the example.
https://www.streamtext.net/embedded-player-integration.html?event=IHaveADream
Here is the HTML code that you can use to begin your integration.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedded player</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
table {
width: 100%;
height: 100%
}
td {
width: 100%;
}
</style>
</head>
<body id="mcp">
<table>
<tbody>
<tr id="header">
<td>
<label for="fontSize">Size</label>
<select id="fontSize">
<option value="14px">14</option>
<option value="18px">18</option>
<option value="24px">24</option>
<option value="30px">30</option>
<option value="36px">36</option>
<option value="42px">42</option>
</select>
<label for="fontFamily">Font</label>
<select id="fontFamily">
<option value="Arial,sans-serif">Arial</option>
<option value="Courier New,monospace">Courier New</option>
<option value="Trebuchet MS,sans-serif">Trebuchet</option>
<option value="Verdana,sans-serif">Verdana</option>
</select>
<label for="backColor">Background</label>
<select id="backColor">
<option value="#000000">Black</option>
<option value="#0000ff">Blue</option>
<option value="#008000">Green</option>
<option value="#ff0000">Red</option>
<option value="#ffff00">Yellow</option>
<option value="#ffffff" selected="selected">White</option>
</select>
<label for="foreColor">Color</label>
<select id="foreColor">
<option value="#000000">Black</option>
<option value="#00008b">Dark Blue</option>
<option value="#0000ff">Blue</option>
<option value="#008000">Green</option>
<option value="#ff0000">Red</option>
<option value="#ffff00">Yellow</option>
<option value="#ffffff">White</option>
</select>
<label for="language" id="languageLabel" style="display: none">Language</label>
<select id="language" style="display: none">
</select>
<label for="scroll">Scroll</label>
<input type="checkbox" id="scroll" checked="checked" />
</td>
</tr>
<tr id="content">
<td style="height: 100%;">
<iframe id="streamTextIFrame" style="border:0;width:100%;height:100%"></iframe>
</td>
</tr>
</tbody>
</table>
<script>
document.querySelector("#streamTextIFrame").src = "//www.streamtext.net/player/embedded" + document.location.search + "&annotations=1";
let fontSize = document.querySelector("#fontSize");
let scroll = document.querySelector("#scroll");
let fontFamily = document.querySelector("#fontFamily");
let backColor = document.querySelector("#backColor");
let foreColor = document.querySelector("#foreColor");
let language = document.querySelector("#language");
let languageLabel = document.querySelector("#languageLabel");
var streamTextWindow;
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.source === window) return;
let data = event.data && JSON.parse(event.data);
if (!data || data.operation !== "initialize") return;
streamTextWindow = event.source;
updateOptions(data.options);
}
function updateOptions(options) {
if (options.fontFamily) fontFamily.value = options.fontFamily;
if (options.fontSize) fontSize.value = options.fontSize;
if (options.foreColor) foreColor.value = options.foreColor;
if (options.backColor) backColor.value = options.backColor;
if (options.scroll !== undefined) scroll.checked = options.scroll;
if (options.languages && options.languages.length > 1) {
language.innerHTML = ""; //clear the options if they exist
language.style.display = "unset";
languageLabel.style.display = "unset";
options.languages.forEach(function (lang) {
let option = document.createElement("option");
option.value = lang.value;
option.label = lang.label;
language.appendChild(option);
});
language.value = options.language;
}
}
function updateStreamTextWindow(options) {
if (!streamTextWindow) return;
streamTextWindow.postMessage(JSON.stringify({ operation: "update-options", options: options }), "*");
}
document.addEventListener("DOMContentLoaded", function () {
fontFamily.addEventListener("change", function (e) {
updateStreamTextWindow({ fontFamily: e.target.value });
});
fontSize.addEventListener("change", function (e) {
updateStreamTextWindow({ fontSize: e.target.value });
});
foreColor.addEventListener("change", function (e) {
updateStreamTextWindow({ foreColor: e.target.value });
});
backColor.addEventListener("change", function (e) {
updateStreamTextWindow({ backColor: e.target.value });
});
scroll.addEventListener("change", function (e) {
updateStreamTextWindow({ scroll: e.target.checked });
});
language.addEventListener("change", function (e) {
updateStreamTextWindow({ language: e.target.value });
});
});
</script>
</body>
</html>
Getting Support
Phone: (608)-234-4759Email: support@streamtext.net
1 Comments