Customize the message field

You can control whether or not the message field is shown to a user.

By default, the message field is visible. To hide the message field, set the messageFieldVisible property to false, for example:

1<Chatbox
2  appId="<APP_ID>"
3  userId="sample_user_alice"
4  conversationId="sample_conversation"
5  messageFieldVisible={false}
6/>

You can control the placeholder text that's shown in the message field before the user has entered a message. By default, the placeholder text is "Say something...", or a translation of that phrase into the user's local language.

To override the default placeholder text, use the messageFieldPlaceholder property. For example:

1<Chatbox
2  appId="<APP_ID>"
3  userId="sample_user_alice"
4  conversationId="sample_conversation"
5  messageFieldPlaceholder="What's happening?"
6/>

You can control whether the message field allows spellchecking by the user's browser or operating system. By default, spellcheck is turned off.

To enable or turn off spellcheck for the message field, use the messageFieldSpellcheck property. For example, to turn on spellchecking:

1<Chatbox
2  appId="<APP_ID>"
3  userId="sample_user_alice"
4  conversationId="sample_conversation"
5  messageFieldSpellcheck={true}
6/>

Note that enabling spellcheck may also turn on autocorrect on some mobile devices.

You can control whether a user can send a message by tapping the Enter key, with the enterSendsMessage property. By default, tapping Enter sends a message.

To turn off using the Enter key to send a message, you can set the following:

1<Chatbox
2  appId="<APP_ID>"
3  userId="sample_user_alice"
4  conversationId="sample_conversation"
5  enterSendsMessage={false}
6/>

When set to false, the only way for a user to send a message is by tapping the Send button.