Go beyond the obvious and take a sneak peek at deeper integrations.
Staffbase already offers a variety of ways to get your content in front of your users. Even your CEO has the option to engage directly with a weekly podcast update from within the app.
But what if you want to make even more content available? Let’s dream bigger! Many companies use podcasts as a way to get their message out. Be it for an expert panel, knowledge sharing or other purposes. There are a variety of reasons why it’s beneficial to host a podcast on public streaming platforms such as Spotify or others.
Wouldn’t it be great to make this more accessible for your users within the app ?
Staffbase comes with pre-built widgets like the Embedded Page Widget. However, sometimes more is needed because your desired source system has some additional requirements.
That’s where Staffbase’s custom widgets come in. They can help you to add content from other sources to news or pages.
Spotify provides a way to copy an embed code snippet for use on external sites. This code snippet also provides you with the URL needed to embed a specific podcast, playlist, or song.
Get the embed code in Spotify
Configure embed code in Spotify
You could take the src-URL and use the Embedded Page Widget. However, this probably won’t always work because Spotify has some additional iframe configuration requirements.
An example would be the allow attribute. It requires, among other things, encrypted-media. Only that would make it playable. If it is missing, users would most likely only be able to listen to previews, even when it’s not restricted.
And that is where you can start to create your own Spotify Widget for Staffbase.
To get started, you can mostly follow the Countdown guide. The part about Define Functionalities for the Countdown Widget will be a bit different, but should be easy to follow.
The code snippets below were created based on the widget name spotify-widget.
The Spotify widget should provide an option to specify the src-URL, size, and width for each widget placement, with all other configurations predefined in the widget code itself.
Widget Configuration
In the configuration-schema-ts file you provide the configurationSchema and the uiSchema constant for the three configurations:
In the index.ts file, provide the three widgetAttributes as just defined in the configuration file.
The spotify-widget.tsx file contains the look and feel of our widget.
For SpotifyWidgetProps, we need to make sure the interface knows about your attributes
The SpotifyWidget const is where the UI itself is built:
We define two CSS styles, one for Normal and one for Compact (lines 29-37). Before you can work with the CSS definitions, you need to make sure that you also declare an import in the widget file:
Lines 39-40: Assign the width property to the style based on your widget configuration
Lines 42-47 select the correct style depending on the widget configuration.
In line 49, you return the complete iframe embed code based on our configuration. As you can see, the allow and loading attributes are preconfigured. In addition to the style attribute, the src attribute is also set based on your configuration.
From here you should be ready to test. For instructions on how to do a test run, go back to the Countdown Guide.
Finally, build and host your widget to make it available to your editors. Once you have added it to the Administration, you will be able to place the widget in the location of your choice.
Normal View
Compact View
Since this was a light overview of how custom integrations can work with Staffbase, feel free to generate your own ideas for other custom integrations. It doesn’t have to be a streaming service embed like in this example. It could be something completely different.
Since custom widgets are designed to integrate content into pages and news, and you are open to more ways to integrate, you may also want to take a look at custom plugins. Happy coding!