@audio-intakes/editor v0.1.0
Getting Started
About
This project is exclusively intended for official partners of > Audio Intakes (@audio-intakes) and is of no > use if you don't have the required API credentials.
Our Editor component is used to configure audio intakes, the building blocks for the Recorder component. It is an optional user interface that you can use to simplify and speed up the integration. Nevertheless if you for example already have a form builder you can also simply connect the dots through our API, without integrating the Editor component.
The Editor component is built to be used individually by each user in your software that has access to the Audio Intakes functionality. This component consumes, amongst other properties, a userId. Therefore, each user has full management over their own set of audio intakes. The entry point for each user in this editor is a library containing their intakes. From there, users can list their intakes, edit them, duplicate intakes for quick setup, archive their intakes and of course create new ones.
Example!
Installation
yarn add @audio-intakes/editor
or
npm install --save @audio-intakes/editor
or
<head>
...
<!-- Load the Editor library in the HTML head tag of your page -->
<script src="//components.audiointakes.com/editor.js"></script>
...
</head>
Importing
ES6:
import "@audio-intakes/editor";
CommonJS:
require("@audio-intakes/editor");
Versions
Latest: 0.3.1
Usage
Authorization
To be able to use the Editor application you are required to pass on a valid JWT bearer token. This token can be fetched using your api credentials (key and secret) provided by us. The token expires after one day but if the Player receives an expired token it will inform you with this feedback.
Endpoint
Development:
https://partner-api-development.onrender.com/v1/auth/login
Production:
https://partner-api-production.onrender.com/v1/auth/login
Headers
Content-Type application/json
Body
{
"apiKey": "<YOUR_API_KEY>",
"apiSecret": "<YOUR_API_SECRET>"
}
It's recommended that you store your API Key and API Secret in safe environment. You will be sent two sets of credentials: one for development and one for production.
Return
When you pass your credentials this endpoint will return a JWT bearer token with an issued at timestamp. The token expires after one day but if the Editor receives an expired token it will inform you with this feedback.
{
"accessToken": "<your_access_token>"
}
Example
For the container div the minimum required width is 480px and the minimum required height 480px. The Editor will read these dimensions and if not sufficient update the UI with this message.
NPM
import "@audio-intakes/player";
function Demo() {
return (
<div id="editor-container" style="min-width: 320px; min-height:180px">
<audio-intakes-editor-component
token="<your_access_token>"
customer="<a_valid_customer_id>"
user="<a_valid_user_id>"
language="en-gb"
theme="dark"
/>
</div>
);
}
render(<Demo />);
CDN
When you have added the editor script with the cdn you can add it like this:
<body>
<div id="editor-container" style="min-width: 320px; min-height:180px">
<audio-intakes-editor-component
token="<your_token>"
customer="<a_valid_customer_id>"
user="<a_valid_user_id>"
language="en-gb"
theme="dark"
/>
</div>
</body>
Arguments
Argument | Type | Description | Default value |
---|---|---|---|
token (required) | String | JWT bearer token | undefined |
customer (required) | String | A valid customer id to authorize the provided userId | undefined |
user (required) | String | A valid user id to fetch the right submissions | undefined |
theme (optional) | String | A theme name (see available themes) that defines the colors of the application | "light" |
language (optional) | String | A language locale (see available languages) | The user's browser language if available, otherwise "en-gb" |
Available languages
Language | Locale |
---|---|
English | "en-gb" |
Dutch | "nl" |
Available themes
["light", "dark"]
Browser compatibility
IE Edge Firefox Chrome Safari Opera Safari on iOS Opera mini Android browser Opera mobile Chrome for Android Firefox for Android
Errors
API
Error (code) | Description |
---|---|
Not found (404) | Usually returned when the API doesn’t find the requested resource using its ID reference. In the case of the Player component this could either mean the customerId or the userId . |
Unauthorized (401) | Returned when either the JWT token in invalid/expired or if you are not authorized to fetch the required submission based on the provided customerId. |
Internal service error (501) | Our API experiences an internal error. We will get notified when this happens and we will do everything to get us back live as soon as possible. |
Properties
Error | Description |
---|---|
Invalid token | The token is not provided, not of type string , not a JWT token or, the token is expired. |
Invalid customerId | The customerId is either not provided or not of type string . |
Invalid userId | The userId is either not provided or not of type string . |
Invalid language | The language is either not of type string or not (yet) supported by us. You can find the supported languages under the 'Available languages' section in this README.md. |
Invalid theme | The theme is either not of type string or not (yet) supported by us. You can find the supported themes under the 'Available themes' section in this README.md. |
Device
Error | Description |
---|---|
Insufficient size | The size of the element containing our Player component is not sufficient. Our player component requires a minimum width of 320px and a minimum height of 180px. |
Unsupported browser | The device or browser is not supported by our Player component. You can find the list of supported browsers under the 'Browser compatibility' section in this README.md. |
Troubleshooting
If you have any trouble understanding our documentation please feel free to contact us at:
Partner support: partners@audiointakes.com
or via our Slack channel:
2 years ago