Linkfire Help Center

Follow

Embed a Linkfire widget on your website

In addition to a landing page, your Linkfire music links also automatically create a widget that you can embed on your own website. This widget contains the audio preview of your link, as well as all the destinations as they appear on the corresponding landing page.

Two widgets to choose from
Our widget is available in two versions, which version you use depends largely on your preferences.

The showcase widget features a prominent album artwork with a Play button. When the user clicks the Play button, the artwork slides away to reveal a music player along with all available services (as defined in your link settings). We recommend using the showcase widget when you show multiple widgets side by side.

The clickthrough widget is similar to the showcase widget, but it doesn’t initially display the full artwork. Instead, it shows all available services from the beginning. We recommend using the clickthrough widget when only showing a single widget, especially in a context where the content is already explained (such as in an article about your new album).

 

How to embed the Linkfire widget
In order to embed your widget on your website or blog, you will need to have access to edit the site's HTML. If you don't know how to access this, ask the person responsible for maintaining your website.

You embed the widget by embedding this short HTML code snippet:

<iframe
   data-lnk-widget
   src="https://artist.lnk.to/album/widget"
   width="300"
   height="300"
   frameborder="0"
   allowtransparency="true">
</iframe>

Replace the URL highlighted in purple with the URL of your own Linkfire link, and the default values of 300 with your desired width and height.

The above snippet will embed the showcase widget version. To instead embed the clickthrough widget version, add ?view=clickthrough to the source, so the full value of src becomes: https://artist.lnk.to/album/widget?view=clickthrough 

Manage your widget’s settings
A widget is always associated with a Linkfire link. To change settings like the audio preview, available services or the call-to-actions for services, edit these by customizing the landing page of the link.

Enabling auto-pause in all browsers
You can embed several Linkfire widgets on the same page. If a user plays the audio preview on one widget while it’s still playing on another widget, the first widget will automatically stop playing. However, this does not work in the Safari browser.

In order to enable this functionality in Safari, you must add this code to your website in addition to any widgets:

<script src="https://staticcloud.linkfire.com/widget-embed/v1/embed.min.js">

You should place this right before your closing </body> tag and after any embedded widgets.

Limitations

  • The widget only works with music links created in the new Linkfire app or through our API. Links created in the old Linkfire app will use the old widget.
  • The widget only works for links with audio sample previews, not with links that use a video preview or no preview.
Was this article helpful?
0 out of 0 found this helpful