Web Audio Player

Once you have obtained your authentication details (username and password), you can begin integrating the Quartr web player into your product. To quickly serve your users with recorded event audio streams from the Quartr database, you can use the Quartr embedded web player. This player can be easily embedded into your product using an iframe, and it is available with or without a layout, depending on your preferences. The player requires only a Quartr companyId and eventId to function, and we provide copy-and-paste snippets for any given company and event, including links to any relevant reports or documents.

Alternatively, you can set up your own custom player implementation using the Quartr companyId and eventId. We provide best practices and code examples for creating custom players that fit your chosen style and design patterns.

Getting company and event ids can be done through the company endpoints

const axios = require('axios');

const username = 'username'; // replace with your username
const password = 'password'; // replace with your password

// Set the ticker symbol for the desired company
const ticker = 'AMZN';

// Set the event type and country filters
const eventType = 'all';
const country = 'US';

// Make a request to the companies endpoint with basic authentication and parameters
axios.get(`https://api.quartr.com/public/v1/companies/ticker/${ticker}/`, { 
    auth: { username, password }, 
    params: { eventType, country } 
})
.then(response => {
    console.log(response.data);
})
.catch(error => console.log(error));

Using the companyId and eventId fields from the response you can use one of the web player endpoints to get a embeddable web player.

<!DOCTYPE html>
<html>
<head>
	<title>Quartr Audio Player</title>
</head>
<body>
	<!-- With layout -->
	<div style='position:relative;margin:0 auto' class='q'><style>.q{min-height:248px;max-width:640px}.f{bottom:2rem}.align-bottom{vertical-align:bottom}.position-absolute{position:absolute}.inline{display:inline}@media only screen and (max-width:670px){.q{min-height:403px;max-width:327px}.f{bottom:0}}.f img{margin: 10px 0 0 0!important;}@media only screen and (max-device-width:670px){.q{min-height:403px;height:403px;max-width:327px}.f{bottom:0}}</style><iframe title='Quartr Audio Player' height='100%' width='100%' src='https://app.quartr.com/embed/company?&id=11326' style='border:0' class='position-absolute'></iframe><div class='f position-absolute' style='line-height:1rem;font-weight:500;width:100%;opacity:.4;font-size:13px;font-family:sans-serif'><a href='https://quartr.com?utm_campaign=embed' target='_blank' style='color:#000;text-decoration:none'>Powered by <img class='align-bottom inline' src='https://app.quartr.com/embed-player/logo.svg' alt='Quartr' width='57' height='16'></a> <a href='https://quartr.com/download?utm_campaign=embed' target='_blank' style='float:right;color:#000;text-decoration:none'>Get the mobile app <img src='https://app.quartr.com/embed-player/link.svg' class='align-bottom inline' alt='Quartr Download' width='16' height='16'></a></div></div>
	
	<!-- Iframe only -->
	<iframe title='Quartr Audio Player' height='100%' width='100%' src='https://app.quartr.com/embed/company?&id=11326' style='border:0' class='position-absolute'></iframe>
</body>
</html>

Styling the Quartr Web Player

Quartr provides an endpoint for uploading your own styles to personalize the appearance of the embedded web player.

Uploading a Stylesheet

To upload a stylesheet, you'll need to make a POST request to the /web-player/stylesheet endpoint. This request must include your authentication parameters and a styles object in the body of the request.

const axios = require('axios');

const username = 'username'; // replace with your username
const password = 'password'; // replace with your password

const styles = {
    logoDark: true,
    playerBackground: "#FF00FF",
    playerBorderRadius: "4px",
    companyTitleColor: "#00FF00",
    companySubTitleColor: "#FF00FF",
    eventDate: "#00FFFF",
    callCurrentLengthColor: "#FFA500",
    callLengthDividerColor: "#FFFF00",
    callDurationColor: "#FF0000",
    controlButtonIconColor: "#00FF00",
    controlButtonBackgroundColor: "#0000FF",
    controlButtonBackgroundHover: "#00FFFF",
    controlButtonDocsArrow: "#FF00FF",
    docsMenuBackgroundColor: "#FF0000",
    docsMenuLinkTextColor: "#00FF00",
    docsMenuLinkIconColor: "#0000FF",
    rangeActiveColor: "#FFA500",
    rangeLeftColor: "#D3D3D3",
    logoBackgroundColor: "#FF00FF"
};

axios.post(`https://api.quartr.com/public/v1/web-player/stylesheet`, {styles}, { 
    auth: { username, password }
})
.then(response => {
    console.log(response.data);  // "Stylesheet uploaded successfully."
})
.catch(error => console.log(error));

This example payload includes the styles object with all possible properties. All fields are optional, and you can include only the styles that you want to customize. The values should be CSS-compliant.

Using the Custom Styles

Once you've successfully uploaded your stylesheet, it will be applied to your Quartr web player.

The WebPlayerResponse includes both default and styled versions of the embed code:

export interface WebPlayerResponse {
  /**
   * Embedded player code with layout.
   */
  withLayout: string;
  /**
   * Embedded player iframe.
   */
  iframeOnly: string;
  /**
   * Embedded player code with layout and custom style if custom style uploaded.
   */
  withLayoutStyled: string;
  /**
   * Embedded player iframe and custom style if custom style uploaded.
   */
  iframeOnlyStyled: string;
}

You can use withLayoutStyled or iframeOnlyStyled to embed the styled player into your product.

Custom Style Validation

Please note that the styles object in your request must meet the validation requirements specified in the WebPlayerTheme interface. If the validation fails, the API will return a "Stylesheet validation failed." message.