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
<head>section of your HTML page. This part triggers the loading of the required JavaScript and CSS files. - 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 (DOMContentLoaded), 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.