Attributes

The goal of the following document is to enumerate the different fields controlling design attributes in the SDK.

Brand

NameDescriptionDefaultExample
<integer name="message_receive_icons">For each message, there are three indicators available: Message sent, Message received, Message read. You can customize the indicators according to your needs, by using a number between 1 and 3:
0 - text (sent, delivered etc.) instead of icons
1 - Sent only
2 - Sent+received
3 - Sent+received+read
<string-array name="message_receive_text">If you set 0 in the resource message_receive_icons, you can specify what texts appears for each state. You must have 4 items, in the following order:
1st item -message sent
2nd item - message delivered
3rd item - message read
4th item - message not delivered
5th item - message sending

Brand Message Bubble – (The First Brand Message)

NameDescriptionDefaultExample
<dimen name="brand_bubble_stroke_width">Int number for the outline width.0dp
<color name="brand_bubble_stroke_color">Color code for the outline color.#004DC9 (blue)
<color name="brand_bubble_message_text_color">Color code for the text of the brand bubble.@android:color/white
<color name="brand_bubble_message_link_text_color">Color code for links in the text of the brand bubble.@android:color/white
<color name="brand_bubble_timestamp_text_color">Color code for the timestamp of the brand bubble.#46474A (dark gray)
<color name="brand_bubble_background_color">Color code for the background of the brand bubble.#004DC9 (blue)
<color name="brand_logo_background_color">Color code for the background of the default brand logo next to the bubble.#007AFF (light blue)
<dimen name="brand_bubble_padding_right">Brand's welcome message bubble right padding.8dp
<dimen name="brand_bubble_padding_left">Brand's welcome message bubble left padding.8dp
<dimen name="brand_bubble_padding_top">Brand's welcome message bubble top padding.8dp
<dimen name="brand_bubble_padding_bottom">Brand's welcome message bubble bottom padding.8dp

Agent Message Bubbles

NameDescriptionDefaultExample
<dimen name="agent_bubble_stroke_width">Int number for the outline width.0dp
<color name="agent_bubble_stroke_color">Color code for the outline color.#004DC9 (blue)
<color name="agent_bubble_message_text_color">Color code for the text of the agent bubble.white
<color name="agent_bubble_message_link_text_color">Color code for links in the text of the agent bubble.white
<color name="agent_bubble_timestamp_text_color">Color code for the timestamp of the agent bubble.#46474A (dark gray)
<color name="agent_bubble_background_color">Color code for the background of the agent bubble.#004DC9 (blue)
<color name="agent_avatar_background_color">Color code for the background of the agent default avatar next to the bubble.#949596 (gray)
<color name="agent_avatar_icon_color">Color code for the agent default icon in the avatar next to the bubble.#ffffffff>
<color name="agent_bubble_link_preview_background_color">Color code for the background of the agent bubble when url is presented.#ffffffff
<color name="agent_bubble_link_preview_title_text_color">Color code for the background of the agent title text color when url is presented.#ffffffff
<color name="agent_bubble_link_preview_description_text_color">Color code for the background of the agent description text color when url is presented.#555555 (gray)
<color name="agent_bubble_pci_form_invitation_background_color">Background color of the form invitation bubble.#ffffffff
<color name="agent_bubble_pci_form_invitation_background_btn_color">Background color of the form invitation button only.#ffffffff
<color name="agent_bubble_pci_form_invitation_stroke_color">Color of the stroke (border) of the form invitation bubble.#949596 (gray)
<color name="agent_bubble_pci_form_invitation_button_text_color">Color of the text on the button.#004DC9 (blue)
<color name="agent_bubble_pci_form_invitation_description_text_color">Text color on the description in the form invitation bubble.#949596 (gray)
<color name="agent_bubble_pci_form_invitation_title_text_color">Text color on the title in the form invitation bubble.#ff000000
<color name="agent_bubble_pci_form_invitation_icon_tint_color">Color of the icon in the form invitation bubble.#004DC9 (blue)
<dimen name="chat_bubble_padding_right">Chat message (agent/consumer) bubble right padding.8dp
<dimen name="chat_bubble_padding_left">Chat message (agent/consumer) bubble left padding.8dp
<dimen name="chat_bubble_padding_top">Chat message (agent/consumer) bubble top padding.8dp
<dimen name="chat_bubble_padding_bottom">Chat message (agent/consumer) bubble bottom padding.8dp

Consumer Bubbles

NameDescriptionDefaultExample
<dimen name="consumer_bubble_stroke_width">Integer in dp for the bubble stroke width of the consumer bubble.1dp
<color name="consumer_bubble_message_text_color">Color code for the text of the consumer bubble.@android:color/black
<color name="consumer_bubble_message_link_text_color">Color code for links in the text of the consumer bubble.#004DC9 (blue)
<color name="consumer_bubble_timestamp_text_color">Color code for the timestamp of the consumer bubble.#46474A (dark gray)
<color name="consumer_bubble_background_color">Color code for the background of the consumer bubble.#EDEDED (light gray)
<color name="consumer_bubble_state_text_color">Color code for state text next to the consumer bubble.#46474A (dark gray)
<color name="consumer_bubble_stroke_color">Color code for the stroke of the consumer bubble.#EDEDED (light gray)
<dimen name="chat_bubble_padding_right">Chat message (agent/consumer) bubble right padding.8dp
<dimen name="chat_bubble_padding_left">Chat message (agent/consumer) bubble left padding.8dp
<dimen name="chat_bubble_padding_top">Chat message (agent/consumer) bubble top padding.8dp
<dimen name="chat_bubble_padding_bottom">Chat message (agent/consumer) bubble bottom padding.8dp

Bubbles Corner Radius

NameDescriptionDefaultExample
  • <dimen name="end_bubble_bottom_left_radius">
  • <dimen name="end_bubble_top_left_radius">
  • <dimen name="end_bubble_top_right_radius">
  • <dimen name="end_bubble_bottom_right_radius">
  • Define the corners radius of all the consumer bubbles (on the right side)10dp, bottom_right is 0dp
  • <dimen name="start_bubble_bottm_lefot_radius">
  • <dimen name="start_bubble_top_left_radius">
  • <dimen name="start_bubble_top_right_radius">
  • <dimen name="start_bubble_bottom_right_radius">
  • Define the corners radius of all the agent/brand bubbles (on the left side)10dp, bottom_left is 0dp
    <dimen name="unread_indicator_bubble_radius">Define the corners radius of the unread messages bubble.20dp for all the corners
    <dimen name="scroll_down_indicator_radius">Define the left top and the left bottom corners radius of the scroll down indicator.20dp for left top and the left bottom the corners
    <dimen name="scroll_down_indicator_counter_radius">Define the corners radius of the unread messages counter inside the scroll down indicator.20dp for all the corners

    Date Headers

    NameDescriptionDefaultExample
    <color name="lp_header_text_color">Day/date header text colorDark gray (#46474a)
    <color name="lp_header_background_color">Day/date header background color@android:color/white

    Message Edit Text

    NameDescriptionDefaultExample
    <color name="edit_text_underline_color">Color code for the Enter Message control underline color.#90CAF9
    <color name="lp_enter_msg_text">Define the input message text color.@android:color/black
    <color name="lp_enter_msg_hint">Define the input message hint color.@android:color/darker_gray
    <color name="lp_send_button_text_enable">Define the color of the send button when it’s enabled.#004DC9 (blue)
    <color name="lp_send_button_text_disable">Define the color of the send button when it’s disabled.#B7B8B9
    <bool name="use_send_image_button">Use an icon for the send button instead of "Send" textFALSE

    Connection Status Bar

    NameDescriptionDefaultExample
    <color name="connection_status_connecting_bg_color">Define the color of status bar background color while trying to connect.#F2F5F5F5
    <color name="connection_status_not_connected_bg_color">Define the color of status bar background color when connection is unavailable.#CC000000
    <color name="connection_status_connecting_text_color">Define the color of status bar text color while trying to connect.#46474A
    <color name="connection_status_not_connected_text_color">Define the color of status bar text color when connection is unavailable.@android:color/black

    In Page Navigation – Scroll Down Indicator

    NameDescriptionDefaultExample
    <bool name="scroll_down_indicator_enabled">Enable/disable the scroll down indicator (shown or invisible). True by defaultTRUE
    <bool name="scroll_down_indicator_unread_summary_enabled">Enable/disable the summary in scroll down indicator (shown or invisible). If unread_indicator_bubble_enable is false, it will be in minimized mode without a badge indicating number of unread message. And tap will scroll to the last message.TRUE
    <color name="scroll_down_indicator_unread_counter_text_color">Define the color of the unread messages counter text color.@android:color/white
    <color name="scroll_down_indicator_unread_summary_text_color">Define the color of the unread message summary (preview) text color.@android:color/white
    <color name="scroll_down_indicator_unread_counter_stroke_color">Define the color of the unread messages counter stroke color.#CC000000
    <dimen name="scroll_down_indicator_unread_counter_stroke_width">Define the dimen of the unread messages counter stroke width.1dp
    <color name="scroll_down_indicator_unread_counter_solid_color">Define the color of the unread messages counter solid color.#FF0000 (red)
    <color name="scroll_down_indicator_background_color">Define the color of the scroll down background color.#CC000000
    <color name="scroll_down_indicator_arrow_down_color">Define the color of the image arrow scrolling down.@android:color/white

    General Style

    NameDescriptionDefaultExample
    <color name="conversation_background">Define the color code for the entire view background.
    In activity mode - Also the color of android:windowBackground
    white
    <bool name="link_preview_to_use_more_than_og_tags">parse only <og:> tags or others as well.false - use <og:title> tags only.true - use <og:title> and <title> tags

    Conversation Activity Style – (Activity Mode)

    NameDescriptionDefaultExample
    <color name="lp_colorPrimary">Define the primary color of the activity.android:colorPrimary
    <color name="lp_colorPrimaryDark">Define the primary dark color of the activity.android:colorPrimaryDark
    <color name="lp_textColorSecondary">Define the color of menu button and back arrow on toolbar.@android:color/black

    Accessibility

    NameDescriptionDefaultExample
    <integer name="snachbar_duration_for_accessibility">Number of milliseconds to show the TTR snackbar if the accessibility TalkBack option is on60,000
    <bool name="announce_agent_typing">Announce when the agent is typing. This is applicable only in Activity modeTRUE

    Custom Fonts

    NameDescriptionDefaultExample
    <string name="custom_font_name_conversation_feed">The font name for all conversation feed’s element.Empty (use the device font)sans-serif-thin
    <string name="custom_font_name_non_conversation_feed">The font name for all elements that are not in the conversation feed.Empty (use the device font)customFont.ttf

    Miscellaneous

    NameDescriptionDefaultExample
    <bool name="vibrate_enabled">Enable/Disable vibrate upon receiving messages from agent while conversation screen is in foreground. false by default.false
    <color name="bubble_selected_background_color">Define the background color of item when it’s selected to be copied (if multiple message copy is enabled).#5597a7e3
    <string name="lp_date_format">Define date format.No value
    <string name="lp_time_format">Define time format.No value
    <string name="lp_date_time_format">Define date-time format.No value
    <integer name="sendingMessageTimeoutInMinutes">Define timeout for automatic resending pending message before moving it to failed.60