Quick Start Guide

View Features

A Beat Brokerz Flex App can be added to any website, template, or theme to equip it with instant beat selling features. Out of the box, it includes attractive music interfaces for desktop visitors, and a built in mobile app for mobile users.


Create An App

If you do not have an account already, sign up and choose the option to enroll as an affiliate on the account creation form. If you are a producer with a producer account, a flex app is created for you automatically when you set up your producer profile.

Deploy Your App

After you create a flex app, you can use it in a variety of ways, including deploying it to your own website. The options you choose on Beat Brokerz for your app will control playlists and other behaviors of the application while it is deployed to your website.

Automatic Deployment Plugins

You can add the app to your own site very easily using our CMS plugins. When you create a new flex store app, it will have an associated App ID that you will save to the plugin settings on your site (once the plugin is installed).

Manual Deployment

If your website doesn't run on one of the content management systems listed above, you can still deploy your flex app to your website with relative ease. After you create an app, you will be given two script tags that you can simply copy into the head section of your website/webpage to activate your flex features!


Hosted App Interfaces

We also provide free hosted interfaces to every app that you create which you can use without the need to deploy them. You can find the links to these hosted interfaces on your Beat Brokerz account dashboard and under your flex apps management page.

One-Click Features

Your flex app is packaged with some built-in widgets that can be used on your site with zero configuration. There is a docked player widget that stays visible at the bottom of the screen, and a floating screenplay widget that stays visible at the top left of the screen. To use them, just check them off in your flex app settings. Learn more.

Widgets

Custom widgets can also be used anywhere on your webpages once a flex app is deployed to your site. Our framework and widget API is a completely open platform, so you can create your own widgets or use widgets that other people have made to enhance your site. For more information, visit our section on custom flex widgets.

Theming Options

You can integrate individual flex features/components into your own site layout "on the fly", with seamless HTML & CSS theming features. For more detailed information on how this works, have a look at our theming guide.

App Customization

You also have flexibility to customize display options, behaviors, and music elements that are bundled into your app right from your settings here on Beat Brokerz! The following app configurations are available to you.

App Settings

Many configurations for how your application looks, loads, and behaves when integrated with your website can be made directly from your flex app settings on Beat Brokerz. Some or all of these settings can be overridden by custom programming on your site or by custom widgets you are using, however, these settings define the default behavior of your application when not specifically overridden elsewhere.

To learn how to override features and settings of your flex app on-the-fly for specific web pages, have a look at our developer documentation.

Fullscreen Mode / Mobile App

Every flex app has a built in fullscreen mode which doubles as a mobile app for mobile devices. It is a fully self-contained interface that can be used to browse, listen, and purchase music from your flex store. The fullscreen mode can be opened and closed on demand from any page which has your flex app integrated. As mentioned, the fullscreen mode when viewed on mobile devices (such as phones and tablets), automatically adapts to look and function like a native mobile app for the device it's being viewed on. Therefore, it is effectively an on-demand mobile app for your music store.

Since the fullscreen mode can be opened and closed on-demand, and it also doubles as a mobile app, there are a number of different ways in which you may want to leverage its functionality for the benefit of your website visitors:

Closed initially on all devices, can still be opened:
This is the default display mode. In this mode, the fullscreen interface will only be shown when specifically opened via a widget or other custom programmed element on the page. All of the resources needed to display the fullscreen mode are loaded when the page is loaded, but the fullscreen mode will lay dormant until opened.

Closed initially for desktops and tablets, open initially for mobile phones:
This option allows you to take advantage of the fullscreen mode in the mobile app format and provide a touch optimized interface to your mobile phone users by default. With this option selected, the webpage hosting your flex app will load and show briefly, and then (for mobile phones) immediately display a message that the fullscreen mode is loading just before the fullscreen mode is opened. This allows your mobile phone users to jump straight into the mobile app while users on all other devices still interact with your webpage as the primary interface.

Closed initially for desktops, open initially for tablets and phones:
This option is essentially the same as the option listed above, with the difference being that the fullscreen mode is opened by default for both phone and tablet users, while desktop and laptop users are still going to get your primary webpage interface first, and need to manually open the fullscreen mode to interact with it.

Open initially on all devices, can still be closed:
This option is another extension of the two previous options listed above. In this mode, the fullscreen mode is loaded and opened by default for all devices and browsers viewing the webpage which hosts your flex app. The fullscreen mode can still be closed by the user which will leave them interacting with the underlying webpage.

Open initially on all devices and cannot be closed:
In this mode, the fullscreen mode is the only interface that can be used on the webpage which is hosting your flex app. This mode essentially mimics a native app because the user will not have the option to close the interface, or to access the underlying webpage which is hosting it.

Disabled on all devices and cannot be opened:
This mode bypasses the loading of resources required to display the fullscreen mode / mobile app interface completely. The user will not be able to open the fullscreen mode manually, nor will widgets or other programming on the page. With this option selected, there will be a slight improvement in performance (load time) of the webpage hosting your flex app, since the resources needed to display the fullscreen mode will not need to be loaded. Other widgets and custom flex app elements on your page will however still function normally.

App Background

You can upload a custom background to replace the default background shown on your fullscreen mode home page. The custom background is only shown on the home page of your fullscreen mode, since the rest of the screens in your fullscreen mode have a native background designed to maximize readability of the content on those screens.

When you upload a custom app background, you should keep in mind that it can be viewed on a variety of devices with a multitude of screen dimensions and orientations. For this reason, it is best practice to upload a background image that is at least twice as tall as it is wide, and has a minimum width dimension of 1200 pixels.

One-Click Setup Features

To make your flex app integration as easy to use as possible "out of the box", there are a few different built-in widgets which can be loaded and displayed universally on the pages which host your flex app. When you choose these one-click features in your flex app settings, they are loaded and displayed automatically on any page which hosts your flex app without the need for you to add any extra code or elements to your pages. They are designed to provide a standard interface to your music and playlists that will look clean on most sites "as-is" without any significant customization.

These widgets can also be displayed on a case-by-case basis using shortcodes or htmlcodes. To do this, you wouldn't choose them as a "one-click setup" feature, but rather add them as a custom widget to the widget autoloader (described below) and then selectively decide which pages they should show on by using shortcodes or htmlcodes.

Widget Autoloader

Widgets can be used to add all sorts of different pre-fabricated interface elements and features to your web pages (which interface directly with your flex app music store). You can learn more about them on our widgets page.

In order to use a flex widget on one of your pages, you first need to include the widget script itself. The widget autoloader provides you a convenient way of adding the widget script to your webpage without touching any of your html source code. Widget scripts that you autoload will be loaded on every page that the flex app is installed to.

Note: If you want to selectively load a widget script on just specific pages (and not every page that hosts your flex app), you would just reference the widget script (using a script tag) in the html source of your webpage rather than including it with the built-in widget loader in your flex app settings. If you use a lot of widgets, this method can improve the performance (load time) of your webpages by not loading every widget you use on every page.

To add a widget script to your autoloader, paste the full url to the widget script itself in the text field. The script can be hosted on your own domain or another domain, both ways will work.

Custom Playlists

Custom playlists are the heart of your flex app. They define what music is available for streaming and licensing, and which producers and discounts are featured in your application.

You can create any number of playlists, but you must create at least one playlist in order to supply your flex app with music.

Each playlist that you create can be limited to specific producers and/or musical genres. Each playlist that you create can also be sorted by a number of different criteria including chart rank, sales rank, downloads rank, plays rank, natural order, etc. You can use a single playlist to supply the music for your entire application, or you can create multiple playlists to segregate or organize your chosen music selections.

You can also give each of your playlists a custom title and a description. The title and description can be used in different capacities by the widgets and elements on your page and in your fullscreen mode, so it's important to keep them accurate and descriptive.

Social Connections

By entering links to your social media pages into the fields in the "social connections" side tab, the flex app can use those links to include your social media and link to your social sites in different capacities.

Tips:

  • Enter the full url to your social pages (including the http://)
  • Only link to public facing social pages

Custom Content

You can create custom content to feature through your flex store settings on Beat Brokerz. By creating custom content, new screens are added automatically to the "content" section of your fullscreen app, and the content is also available for custom widgets to use on your web pages.

Content Properties

Each piece of custom content that you create can be assigned its own title, icon, and category. When you specify a category for a piece of content, it is grouped together with any other pieces of content that share the same category name.

Content Format

You can choose from two different formats for each piece of content:

Plain Text:
Plain text is a basic format best suited for simple hand-typed text. You can use basic html markup for text emphasis, but most structural html will be filtered out and line breaks in the text (hitting the enter key) will be preserved when the content is displayed.

Raw HTML:
The raw html format will output your content as-is without any filtering. This format is best for when you enter fully structured html source code as your content and/or you want your content to be displayed with very specific markup being preserved.

Note: The raw html format is only available for non "producer profile" based flex apps. This means that if you are a producer, and you are editing the flex app which is built into your producer profile, the raw html format for custom content will be disabled for website security reasons.