ScoreStream is a fan-driven, high school sports app and platform that allows you to create customized Scoreboard Widgets to showcase your favorite teams’ activity online. Once these are created, they can be integrated and displayed onto your SNO Site.
Check out ScoreStream’s support page for instructions on creating your own Scoreboard Widgets here.
Embedding Your Scoreboard Widget onto Your SNO Site
Once you have finished creating your Scoreboard Widget, ScoreStream will give you an embed code to utilize on your website. However, this initial code that they give you WILL NOT WORK.
Instead, use the following embed code option based on which type of embed you have created on ScoreStream and place it in a widget area using the Custom HTML widget.
For a horizontal embed:
Copy the code below and place it in a Custom HTML widget on your site for a horizontal ScoreStream embed, but swap out the “44688” ID number listed above with your own widget ID number (see below screenshot for where to find this):
<iframe src="https://scorestream.com/widgets/scoreboards/horz?userWidgetId=44688" style="padding:0px;border:0px;width:100%;max-width:100%;height:100%;max-height:100%;min-width:100%;" title="Realtime sports scoreboard widget" scrolling="no" frameborder="0"></iframe>
For a vertical embed:
You will need to add some code to the embed code from ScoreStream before placing it in the Custom HTML widget on your site. Add the following at the beginning of the embed code:
<div style="width:300px; max-width: 100%; height: 400px;">
AND add to end of the code:
</div>
You can adjust the width and height numbers if you'd like, but your MUST keep the max-width: 100%; in order for this embed to work properly on Mobile.
Example
Code from ScoreStream:
<div class="scorestream-widget-container" data-ss_widget_type="teamSchedule" data-user-widget-id="61913"></div><script async="async" type="text/javascript" src="https://scorestream.com/apiJsCdn/widgets/embed.js"></script></div>
Adjusted Code to use on your site:
<div style="width:300px; max-width: 100%; height: 400px;"><div class="scorestream-widget-container" data-ss_widget_type="teamSchedule" data-user-widget-id="61913"></div><script async="async" type="text/javascript" src="https://scorestream.com/apiJsCdn/widgets/embed.js"></script></div>
Next steps after adjusting embed code
Once you have your final updated embed code, go to your website’s Widget Control Panel and place the Custom HTML widget into your desired widget area. Finally, paste the adjusted embed code into the “Content” field, give the widget a title, and hit “Save.”