Changing the Size, Colors & CSS Classes

Pipe’s Mobile Native Recording Client can be customized in terms of size and colors.

Recorder Size

2.0 Embed Code

With the Mobile Native Recording Client delivered by the 2.0 embed code, we’ve adopted a user facing interface with only one button. Previously, with the 1.0 embed code, we used two separate buttons (record/select + upload).


Since we only use one button, the height is considerably reduced to around 40px, excluding the vertical 10px margins. The button’s height on your web page might differ since the font face used on your website and inherited CSS styles can impact the height.


The width of the button adjusts to the text label inside it. If the text is too long it will wrap to the next line while remaining center-aligned

Container tag

The container tag (<piperecorder>) holding the button uses the pipeMobileRecorder CSS class, which you can overwrite in your CSS.


The visible button is actually an HTML <label> tag with the pipeFileInput CSS class applied to it. The class defaults to:

  1. a vertical linear grey gradient
  2. 1px solid #999 border with 3px rounded corner
  3. 10px padding all around the text
  4. it inherits whatever fonts and font sizes are used in your existing CSS
  5. the width of the button adjusts to the text label inside it, if the text is too long, it will wrap to the following line while remaining center-aligned

You can overwrite the pipeFileInput CSS class in your CSS.

1.0 Embed Code

The 1.0 embed code creates 2 buttons that can be used to record and upload a recording.

The 2 buttons (<input> elements) are included in a div with the id #hdfvr-content. The width of this div is 100% and the height is fixed at 120px. Here’s the div highlighted on a web page open on a mobile device with Chrome’s Developer Tools:

Div with the id hdfvr-content highlighted with Chrome&rsquo;s Developer Tools

Colors and Rounded Corners

Since the Mobile Native Recording Client UI has 1 or 2 pure HTML & CSS buttons, you can easily overwrite the CSS classes that apply to those elements.

2.0 Embed Code

When using the 2.0 embed code, the user is only presented with one button. As soon as the user clicks the button, the OS takes over.

For the CSS classes used by the 2.0 embed code for the recorder button shown on mobile browsers see below.

1.0 Embed code

When using the 1.0 embed code the user is presented with 2 buttons. As soon as the user clicks the top button the OS takes over.

CSS Classes in the v2.0 Embed Code

pipeMobileRecorderThe class applied to the custom piperecorder container which holds a div which in turn holds the label and input elements.
pipeFileInputThe class applied to the label element. This is the visible upload button.
pipeStartUploadingThe class applied to the input element. Not visible by default.