Embedded Players
      Back to home
      1. Knowledge Base
      2. Building Ads
      3. Embedded Players

      Spotify Player Integration

      This article provides instructions on how to integrate Spotify Player content into your ads. 

      In this article, you will learn:

      How to Generate the Spotify Embed Code

      How to Embed the Spotify player within Adventive

      How to Generate the Spotify Embed Code

      Check out our Viva Latino example here. 

      1. In Spotify, navigate to the song, album, artist, or playlist you want to use in your Adventive ad.
      2. Copy the embed code from Spotify. You can get the embed code by clicking the three dots next to any song, album, artist, or playlist in Spotify and selecting Share, then Embed playlist (or artist, album, or song):

        KB-Spotify-embed

      3. The below screen will display, allowing you to choose the size of your embedded
        player. You can choose from "Normal" or "Compact".

        KB-Spotify-choose-size
      4. Once the size has been selected, click the green "COPY" button in the bottom right. You can also click the "Show Code" checkbox to view the embed code.

        KB-Spotify-copy
      5. You can paste the code into a text doc to Save for later. 

        Example of Spotify code:
        <iframe style="border-radius:12px" src="https://open.spotify.com/embed/playlist/37i9dQZF1EIcVkEtbzdTRx?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>

      How to Embed the Spotify player within Adventive

      1. Choose the ad format and dimensions of the ad unit you wish to add the Spotify player to.  For guidance on building specific formats, check out this article.
      2. From the left menu, select the components icon component, HTML5 Import.

        KB-Spotify-HTML5-Component
      3. Add the HTML Import component to your ad unit in Adventive and select the "Paste Snippet" option in the HTML5 Import properties on the right side of the builder.

        KB-Spotify-HTML5
      4. Open the Code Snippet editor and paste the previously copied Spotify Player embed code.

        KB-Spotify-HTML5-code
      5. Click Submit. Your playlist preview should now display in the builder:

        KB-Spotify-playlist
      6. Be sure to resize the player container if needed. Use the Ad Previewer to test positioning and size for best results.

      Tracking Limitations 
      As Adventive is not hosting the content assets, we do not have the ability to track data from Spotify embeds, including views, quartiles or any engagements with controls. This will need to be pulled from Spotify as they are the host.