How Do I Customize the Microphone Widget Settings?

The microphone widget can be customized in appearance and behaviour.

Use the guide below to customize:

1. The Widget Style

2. The Widget Behaviour

3. The Widget Labels

Customizing Styles

The size, theme & prompt attributes can all be customized.

  • size can be set to either large (default) or small.
size="small"

size="large"
  • theme can be set to either square (default) or round.
theme="square"

theme="round"
  • prompt can be optionally included to include a question prompt above the recorder.
prompt="true"
  • spacing can be added above and below the recorder by specifying a CSS attribute
spacing="10px"
  • recordButtonColor can be optionally included to specify the color of the record button. The default color is red.
recordButtonColor="blue"
  • recordButtonTextColor can be optionally included to specify the color of the "Record" text on the record button. The default color is white.
recordButtonTextColor="yellow"

Customizing Behaviour

The default audio widget has a 2 minute 30 second time constraint on recordings. If you require longer recordings, use widget version 2.1.7. To learn how to import a specific widget version, click here.

  • backupText can be set either true or false to enable a backup text box as an alternative to recording audio.
backupText="true"

backupText attribute is incompatible with widget versions 2.1.7 and 2.1.8. If you have questions please reach out to our support team at contact@phonic.ai.

 

  • audioRecordingFormat can be set to either WAV or MP3.
audioRecordingFormat="wav"

audioRecordingFormat="mp3"
  • startRecordingImmediately begins recording immediately. This is only available for WAV (not MP3).
startRecordingImmediately="true"
  • autoSubmit submits immediately after someone clicks record.
autoSubmit="true"
  • showCounter can be set to true to display a timer counting up during recording.
showCounter="true"
  • showPlayback can be set to true or false to allow the user to playback their audio afterwards. This defaults to true.
showPlayback="true"

showPlayback="false"
  • platform can be set to either decipher, spss, qualtrics, or left blank.
platform="qualtrics"
  • min-response-duration and max-response-duration can be set to any duration (in seconds). Respondents will not be able to submit recordings below (minimum) or above (maximum) the time specified.
min-response-duration="60"
max-response-duration="120"

 

Customizing Text

  • labelFormat can be set to custom, enabling all other labels to be modified as well. This is especially helpful if you would like these labels to appear in a different language.

    • recordText, the default of which is "Record".

    • rerecordText, the default of which is "Re-Record".

    • submitText, the default of which is "Submit".

    • doneText, the default of which is "Done!".

labelFormat="custom"
recordText="insert your text"
rerecordText="insert your text"
submitText="insert your text"
doneText="insert your text"