What is a web widget?
A web widget is small piece of HTML code that you can add to your website to display something.
Installing Web Widgets
First off you need to log in to your Cloud.
Once you are logged in click on “Widgets”. Here you will find your Player Page, Listen Link Generator, Web Widget Generator as well as your Player Generator.
| Serial | Description |
| 1 | Free Station Player Webpage hosted by Spacial |
| 2 | Generate listen links for various listening options |
| 3 | Generate Widgets which can be embedded in your website |
| 4 | Downloadable and customizable website template |
| 5 | Configuration instructions for customizing the Player Webpage |
| 6 | Preview the customized Player Webpage |
| 7 | Download the Player Webpage code |
| 8 | Web Widgets Tab |
| 9 | Player Tab |
| 10 | Listen Link Tab |
| 11 | Widgets tab |
| 12 | Free Station Player Webpage link |
| 13 | Link to generate the various Listen Links available |
| 14 | Link to generate the various Player Widgets available |
| 15 | Link to generate the various Website Widgets available |
| 16 | Displays the configuration options shown in the following image |
Select the Web Widgets Tab and you will be able to select which Web Widgets you wish to create and set the available options:
Select the options you wish to incorporate and the theme and click the Generate Widget button.
This will generate the code for the required Web Widgets and all that remain is to paste the code snippets into your website where you want the Web Widget to display. If you do not have access to your website source code, please contact your system administrator or web designer to have it added to your website.
The first code snippet must be added to each webpage you wish to add Web Widgets to, and this should be inserted between the <head> and </head> tags which are found at the top of the webpage code. The code snippets for the Web Widgets can then be added as required on the webpage by adding the associated code snippets between the <body> and </body> tags.
To enable your listeners to make requests or dedications, you must add the Media Library Web Widget to your website and to enable listeners to see any dedications, you should also add the Now Playing Dedications Web Widgets which displays the currently playing track as well as any dedication,
Oh yea sorry got support forums confused for a sec.. lol
The other info I provided about the issue with the station widgets stil exists tho as shown above.
And it seems to be happening more and more, something will be playing over the air and neither my sam broadcast pro or the web based cloud backup/player will be playing anything or it will say its playing a song that it isn't and I don't think it's the buffer because it's several songs in a row.
Also how do you adjust the outgoing volume level in sam cloud? When I am on sam pro it's fine and I can adjust it, but there seems to be no ontrol for this on the web based cloud service, am I missing something?
Hi Rich, please raise a support ticket and we will investigate this matter further.
Hi,
strangely, for some people with android, there is no sound, even with html 5 player.
When do you think Spacial will propose an app working with ios and android, for people who only want to download it and just hit Play?
Thanks
Hi Fifi, Android does not play nice with AAC format streams however, if you change the streaming format to MP3, you should have no issues. You can change this format from the user zone at http://userzone.spacial.com, Stations --> Manage Station --> Manage Relays.
Please let us know if this works for you.
I have already changed it to mp3.
For me with a Sony mobile, the html 5 player works fine, but some people with android can hear no sound.
Your widgets and players don't work fine, even with mp3 stream.
That's why, like thousands of radios, a Spacial app would be nice to install on mobile for them and click play...
(for example, with android 5.1.1, I have no sound on your page (responsive and mobile friendly website) :
http://listen.samcloud.com/w/72535/Midnight-Sunset/?play=y )
I got it all working on my end by removing the <body></body> section and what I did is copied the <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> right below the <html> section. Mine also works mobile friendly by doing iframe independent urls tweeks and works well on my app thus my software development experience however, as matthew said using http://userzone.spacial.com is the best and easiest way of making any stream mobile friendly using current provided coding urls. Hope this helps.
<html>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<head>
<script type='text/javascript' src='http://media.spacial.com/webwidgets/widget/v2/spacialwidget.js?lib=5&his=5&queue=5&art=true&themeType=defined&theme=dark'></script>
</head>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<div class='Example'></div>
<div class='Example'></div>
<div class='Example'></div>
<div class='Example'></div>
</html>
Hi Nathaniel,
you wrote :
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
But what is the entire adress for "//codejquery.com/jquery-2.1.4.min.js... ?
It begins with http, then ??
Thanks.
The link you are referring to would be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Hey!!!
Trying to put the request interface on a blog page...
http://shoreradio.blogspot.com/p/request.html
Not working...
Hi Jim, I cannot find either of the code snippets you would need to add the request and dedication functionality to your website. I would recommend checking out the knowledgebase article at the head of this page.
Based upon what I had in there before and what I've seen, here's the code as it appears in the html of the blog post...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://media.spacial.com/webwidgets/widget/v2/spacialwidget.js?lib=30&his=5&queue=5&art=true&themeType=defined&theme=metallic&showBuyButton=always" type="text/javascript"></script>
<br />
<div class="spacial-widget-library-69964-2eb515f81e940c611ebd329233cceabf18b8895a">
Hi Jim, without seeing the code on your website we cannot investigate this matter however, the first two lines should be added between the <head> and </head> tags whilst the last line should be added between the <body> and </body> tags.
Hi Jim, you could consider adding the code from the Head section to the Body section. As long as this is above the widget code this should work.
We haven't made any changes recently which could indicate your web hosting service might have made some changes.