Embedding Your First Recorder
To embed a recorder in your website, follow these steps:
- Sign in to your Pipe account dashboard and go to the Embed Recorder section.
- In the lower right area, you’ll find the 2.0 and 1.0 embed codes. Copy the 2.0 HTML one, there are 2 parts to it.
- Open the HTML page where you want to embed the recorder in a text/code editor.
- Paste the first part of the 2.0 HTML code in the
- Paste the second part of the 2.0 HTML code at the point in your HTML page where you want the actual recorder interface to be displayed.
- Save the modified HTML page and upload it back to your website.
- Once the modified page is uploaded, refresh the page in your browser to see the embedded recorder in action.
After the Pipe JS library (
pipe.js) and the rest of the page elements load (
pipe.js will search for any
<piperecorder...> tag on the page and, inside the tag, will insert the HTML code for the recorder. At the end it will fire
PipeSDK.onRecordersInserted() (if present).
This variant of loading
pipe.js will block HTML parsing until the script is loaded and executed. In some cases (slow connections) this is not optimal. For more info on how to load
pipe.js in a non-blocking way see the Loading Pipe.js in a Non-blocking Way section.
Any JS Events API or JS Control API implementation that relies on
PipeSDK.onRecordersInserted() needs to be placed AFTER the
pipe.js script tag on the page. Otherwise, you’ll get an
Uncaught ReferenceError: PipeSDK is not defined error in the browser console.