Show Developer Menu

Custom Form Fields

Benefits

You can use custom form fields to ask the customer to provide additional information before submitting their inquiry. These attributes will then be displayed within Reamaze as data attributes associated with the incoming conversation.

You can also use custom form fields to insert hidden values that are contextual to the current conversation. Values can be application specific or session specific (examples: browser information, IP address, or items in cart).

Widget fields

Installation

Make sure you have the Reamaze.js snippet installed from the Installation Step and a method of contact (Shoutbox, Lightbox, or Embeddable Contact Form)

<script type="text/javascript">
  _support['custom_fields'] = {
    // this is an example of hidden data sent with the message
    hidden_value: {
      type: "hidden",
      value: "anything you want"
    },
    
    // this is an example of a dropdown with options that the user can select from
    dropdown_value: {
      type: "dropdown",
      value: ["Value 1", "Value 2", "Value 3"],
      placeholder: "Placeholder prompt"
    },
    
    // this is an example of a free form text field
    order_no: {
      type: "text",
      value: "Default Value",
      placeholder: "Placeholder prompt",
      required: true
    },

    // this is an example of a checkbox field
    subscription_agree: {
      type: "checkbox",
      value: true,
      placeholder: "Please add me to your newsletter",
      required: false
    }
  };
</script>

Copy and place the above code anywhere in your HTML. Then, replace the values above with custom key-value field values specific to your application.

The general format for each field is:

key: {
  type: "{hidden|dropdown|text|checkbox}",
  value: "{string for hidden and text types; array of strings for dropdown; true/false for checkbox}",
  placeholder: "{string for prompt, label, or placeholder value}",
  required: {true|false}
}
  • hidden fields are sent along with the message and are not visible to the user. This is useful for diagnostic information generated by your application or other contextual information useful for your customer support.
  • dropdown fields are displayed as a dropdown with options for the user to choose from. This is useful, for example, for displaying a list of products or other application specific values.
  • text fields are displayed as a free form text input and can be used to gather additional information from the user. For example, this is useful for order numbers, dates, identification numbers, or other contextually useful information.
  • checkbox fields are displayed as a checkbox and can be used to confirm a true or false value with the user. For example, this can be used for confirmations, opt-ins, or required consent.

Example

The following example sends over the customer's current URL and asks the user to select a color from a dropdown.

<script type="text/javascript">
  _support['custom_fields'] = {
    current_page: {
      type: "hidden",
      value: window.location.href
    },
    dropdown_value: {
      type: "dropdown",
      value: ["Red", "Orange", "Yellow", "Green", "Blue", "Purple"],
      placeholder: "What's your favorite color?"
    }
  };
</script>

Next Step

Sometimes you may want to present the customer with fewer fields so that you can get a conversation going as quickly as possible. Reamaze supports Anonymous Guest mode which will remove the default Name and Email fields from the Shoutbox and Lightbox.

Next: Anonymous Guests →