Messaging Send Button

Nuance Messaging SDK has few build-in Custom Send Button controls crafted for designing Messaging layouts. These Button views will take care of sending message to agent on your Application behalf or create an Engagement if one not available.

Prerequisites
Styling Simple Send Button
Styling Gradient Send Button
Styling Arrow Send Button

Prerequisites

Send Message Button does the heavy lifting on sending a message to agent onClick or create an Engagement if one not available. It needs following items for performing these functionalities.

Don't use SDK API EngageMessagingAPI create an engagement, instead use createMessagingEngagment method exposed from NuanMessaging class.
public void createMessagingEngagment(HashMap<String,String> engageParams , HashMap<String,String> agentAttributes, com.nuance.Listener.OnSuccessListener<EngageStatusResponse> sListener, OnErrorListener fListener)

o know more about the engage parameter keys ,refer NuanceMessagingActivity Launch section

Send button also need to know the input view in your messaging layout. Set the default ID customer_input_editText as the value of Id attribute of your input view.

Simple Send Button

Properties

There are various properties that can be set to change the Button behaviour.

Name	type
backgroundColor	color	Set the background color of Simple send Button.
borderColor	color	Set the border color of Simple send Button.
borderWidth	dimention	Set the border width of Simple send Button.
borderRadius	dimention	Set the border radius of Simple send Button.
chatInputTextId	reference	Set the id of messaging Input Field from your layout. By setting this field you are allowing send button to send message to agent on Click event. If you leave setting this property , Button looks for an editText in your layout view using the default ID customer_input_editText
rightArrowAfterLabel	boolean	Setting this property displays a right Arrow after the button text.



	 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        <com.nuance.chatui.SimpleSendButton
            android:id="@+id/sendButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:text="Send"
            android:layout_marginLeft="2dp"
            android:textSize="20dp"
            app:backgroundColor="@android:color/holo_blue_light"
            app:borderRadius="8dp"
            app:rightArrowAfterLabel="true"/>
        <com.nuance.chatui.CustomerTextInput
            android:id="@+id/customer_input_editText"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/sendButton"
            android:paddingLeft="8dp"
            android:paddingRight="2dp"
            app:hintText="Hello Type your message"
            app:sendMessageOnEnter="true"
            app:inputBorderColor="@color/nuan_green"
            app:inputBorderSize="5dp"/>
    </RelativeLayout>
	<!-- By setting the default ID , button is able to find the CustomerTextInput -->

Gradient Send Button

Properties

There are various properties that can be set to change the Button behaviour.

Name	type
startColor	color	Set the gradient start color.
endColor	color	Set the gradient end color.
borderColor	color	Set the border color of Gradient send Button.
borderWidth	dimention	Set the border width of Gradient send Button.
borderRadius	dimention	Set the border radius of Gradient send Button.
chatInputTextId	reference	Set the id of messaging Input Field in your layout. By setting this field you are allowing send button to send message to agent on Click event. If you leave setting this property , Button looks for an editText view in your layout using the default ID customer_input_editText
rightArrowAfterLabel	boolean	Setting this property displays a right Arrow after the button text.



	<RelativeLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/footer_cont"
        android:orientation="horizontal">
        <com.nuance.chatui.GradientSendButton
            android:id="@+id/sendButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:text="Send"
            android:layout_marginLeft="2dp"
            app:borderWidth="5dp"
            app:borderColor="@android:color/holo_blue_dark"
            app:startColor="#ADD8E6"
            app:endColor="#67818a" />
        <com.nuance.chatui.CustomerTextInput
            android:id="@+id/customer_input_editText"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/sendButton"
            android:paddingLeft="8dp"
            android:paddingRight="2dp"
            app:hintText="Hello Type your message"
            app:sendMessageOnEnter="true"
            app:inputBorderColor="@color/nuan_green"
            app:inputBorderSize="5dp"/>
    </RelativeLayout>
	<!-- By setting the default ID , button is able to find the CustomerTextInput -->

Arrow Only Send Button

Properties

There are various properties that can be set to change the Button behaviour.

Name	type
backgroundColor	color	Set the Arrow button background color.
arrowColor	color	Set the Arrow button right Arrow color.
borderColor	color	Set the Arrow button border color.
borderWidth	dimention	Set the border width of Arrow Only send Button.
chatInputTextId	reference	Set the id of messaging Input Field in your layout. By setting this field you are allowing send button to send message to agent on Click event. If you leave setting this property , Button looks for an editText view in your layout using the default ID customer_input_editText


	<RelativeLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/footer_cont"
        android:orientation="horizontal">
        <com.nuance.chatui.ArrowSendButton
            android:id="@+id/sendButton"
            android:layout_width="90dp"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:text="Send"
            android:layout_marginLeft="2dp"
            app:backgroundColor="#939393"
            app:arrowColor="@android:color/white"
            android:padding="20dp"/>
        <com.nuance.chatui.CustomerTextInput
            android:id="@+id/customer_input_editText"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@id/sendButton"
            android:paddingLeft="8dp"
            android:paddingRight="2dp"
            app:hintText="Hello Type your message"
            app:sendMessageOnEnter="true"
            app:inputBorderColor="#2a2a2a"
            app:inputBorderSize="5dp"
            app:inputBorderRadius="10dp"
            app:inputBackgroundColor="#d3d3d3"/>
    </RelativeLayout>
	<!-- By setting the default ID , button is able to find the CustomerTextInput -->