Follow

Adding Web Widgets to your website

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.

CloudLogin01.png

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.

Widgets01.png

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:

WebWidgetsNew01.png

Select the options you wish to incorporate and the theme and click the Generate Widget button.

WebWidgetsNew02.png

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,

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request

Comments

  • Avatar
    Rich Morrissey

    Oh yea sorry got support forums confused for a sec.. lol

  • Avatar
    Rich Morrissey

    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.

  • Avatar
    Rich Morrissey

    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?

  • Avatar
    Mathew

    Hi Rich, please raise a support ticket and we will investigate this matter further.

  • Avatar
    fifi

    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

     

  • Avatar
    Mathew

    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.

  • Avatar
    fifi

    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 )

  • Avatar
    Nathaniel Berrios

    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>

  • Avatar
    fifi

    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.

     

     

     

  • Avatar
    Mathew

    The link you are referring to would be:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  • Avatar
    Jim Jowsey

    Hey!!!

    Trying to put the request interface on a blog page...

    http://shoreradio.blogspot.com/p/request.html

    Not working...

  • Avatar
    Mathew

    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.

  • Avatar
    Jim Jowsey

    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&amp;his=5&amp;queue=5&amp;art=true&amp;themeType=defined&amp;theme=metallic&amp;showBuyButton=always" type="text/javascript"></script>
    <br />
    <div class="spacial-widget-library-69964-2eb515f81e940c611ebd329233cceabf18b8895a">

  • Avatar
    Mathew

    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.

  • Avatar
    Jim Jowsey
    The only problem is that it's a blogger blog and I don't have access to the actual header. As I stated, it worked a few days ago.
  • Avatar
    Mathew

    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.