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,
If I just use the codes were you say to use in my html page it dos not work page just load blank as there is some thing you for got to add.
here is my test page and can see the Widgets don't load in fact it is only blank page. http://gamers-alliances.com/Broadcast/Widget_test.html
so there is some other things you forgot to add to part of the widget page.
I am having the same problem. http://mikeelab.com/test.html
Hi, I would ask you to ensure you have inserted both pieces of code, the code in the Header section of your web page as well as the Web Widget code snippet where you want the code to appear.
Further instructions are included in the user guide available here:
http://support.spacial.com/entries/97980477-Document-1-SAM-Broadcaster-Cloud-Web-User-Interface
Hi Mathew,
Yes, I have followed the instructions. I have tried it many times and I have also uploaded it to 4 different web hosts and still I get a blank page.
Do you have idea what could cause this? I'm not a newbie .... I'm a web designer since 1996 .....
Thanks,
Michael
Hey Matthew
Having the same issue. Placing the snippets exactly where I'm instructed to and nothing.... Are we missing something?
Nothing, I have been building web pages for over 10 years and all I get is blank page, If you would listen to us you might be able to make it work for us. Do you ever try what you put on for us to use?
I would ask anyone with a problem to raise a ticket so we can assist you. Without your account details and website address we cannot investigate this further. @Rickyhay, if this is your page then I can see the Web Widgets working as expected:
http://sandrinternetradio.net/
I would however like to mention that the Web Widgets for the new request feature are different and you would need to generate the new code in your Cloud and update your webpage.
If this does not help, please raise a support ticket and we will investigate this further.
Hi,
same here when I want to use a web widget :
I put the first line in head (<script type='text/javascript' src=... )
then the other parts in body (<div class='spacial-widget-info-... ),
but the page is totally blank.
When I click on "preview in new tab" in the admin page, all is good, the player and others parts are visible.
But when I create a page with the different lines of code as described above, it is not working at all.
Something is wrong.
The page is visible here : http://goo.gl/VkrDvb
The code source is very light, but it is not working...
Me again :
It seems clear that the lines proposed in the admin are wrong now :
For the part in head, I got :
<script type='text/javascript' src='http://media.spacial.com/webwidget...
But it seems now it begins with :
<script src='http://media.spacial.com/widgets/widge...
(viewing the source code on http://sandrinternetradio.net/ ... but on this page, I hear no song at all ! when I click on Listen)
So the admin is proposing old or wrong lines to put on our website.
That's why it generates a blank page for web widget.
It's really time to update the script in admin for stop proposing line as
<script type='text/javascript' src='http://media.spacial.com/webwidget...
which doesn't work...
Hi André,
I would ask you to add this line within the Header and before our JavaScript code segment:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
If this does not resolve the issue, please raise a support request at http://support.spacial.com and we will investigate this further.
I raise a support and never got a fix for the blank page they just ignore you and this guide needs updated as all info and scripts provided don't work.
This document has been updated to reflect the recent changes but it is possible that your web hosting service prohibits the running of these scripts and you should contact your web host to confirm whether this is the case as we can assure you the Web Widgets do work as many customers can confirm.
I Host my own Domain and i can run any scripts , so if it comes up blank mean there is something this guide is missing what i Did was Copy the Preview in new tab page to my Web folder and that works so this guide is missing somthing that the test page has
Have you tried adding the line mentioned above to the <head> </head> section:
Hi,
on my computer I have no problem to listen to my radio, same when I use an app in which I entered the url ( http://samcloud.spacial.com/api/listeen...),
that's ok.
But when I use my phone (Sony Z3 with android 5.1.1), when I go on a page where I installed the player, I hear no sound with Chrome of firefox or Dolphin.
I can see datas are sent and received, but I have no sound.
This is the page where I put the radio : http://goo.gl/TBjAz1
I put the 2 players : the spacial player and an Html5 player : both work fine on my computer, but none on my phone.
Is there a probleme with android?
Do you propose a Spacial App we could use on ios, android, as thousands of radios using Apps?
We launch the app, and it's working.
Thanks.
Hi Fifi, this is a Flash based player and Chrome dropped Flash support. We would recommend ensuring you are streaming in MP3 format as some browsers do not support AAC streaming. I would also recommend checking out the hosted player page which is item 12 in the diagram above. This is mobile device friendly.
yes I have the jquery script in my html header and just loads white page i never ever had any problems with div and scripts like this so it has to be on Spacial's side.
Please move the new line of code to before the web widget Head code and let me know what happens.
You also have one </div> tag too many at the bottom of your page.
Have you defined the <div id="widgets">?
Still no sound on my mobile using the hosted player page which is item 12.
How I can change AAc to Mp3 ?
In the admin I see :
Preferred stream : AAC 128 kpbs
I can't change it.
Dolphin browser can use flash, but in this case, it's the same : no sound.
Strange behaviour on my phone...
No spacial App ?
Fifi, you can change your streaming format from the user zone at http://userzone.spacial.com under Stations, Manage Station, Manage Relays and select the required streaming format from the drop down list.
Zoppl, you appear to have deleted the <body> tag and I would recommend putting this back.
Okay, now I put it in mp3, it's working with chrome on mobile if I use web widget.
But :
That's strange, with Chrome on mobile, this is OK when I simply go to (so, without iframes) :
http://media.spacial.com/webwidgets/player/600x100.html?sid=72535&rid=125710&startstation=true&theme=dark&token=6ffca17e5f7e51b5c599e90c4f0e42639d9097c2
But, when I have this same line using PLAYER -> "generate player" (beginning with
<iframe title='Flash Player' src='http://media.spacial.com/webwidg..)this doesn't work anymore... No sound with chrome, or Dolphin. Strange.
But it works nice with firefox !
Chrome doesn't like iframes??
That would be a question for Google unfortunately but I am glad we have cleared up a few of the issues highlighted recently.
Still doesn't work, c&p all as directed and either get grey lines or a blank page.. also you say to go under manage station to adjust the stream type. I cannot find that setting anywhere.
Hi Rich, without the link to your page we cannot provide any assistance on the widgets but I can confirm that logging in to your user zone at http://userzone.spacial.com, selecting Stations --> Manage Station --> Manage Relays will enable you to select your relay format.
I forgot to show how I have the photo page set up:
https://gyazo.com/6c67785291d818d306d8646654603b94
https://gyazo.com/ff8311cc9cc3f73df880b6fa742c07db
But did get the mobile stream to work by switching it to mp3 ty! :)
Hi Rich,
I believe there is some confusion as you would need to speak with your hosting company regarding your photo question, this is not something we could assist with. Unless we have access to the actual web page where you wish to embed our Web Widgets, we cannot assist you unfortunately.
I would recommend raising a support request at http://support.spacial.com.