Integrate with HTML
      Back to home
      1. Docs
      2. Widget Integrations
      3. Integrate with HTML

      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"