Attributes
The goal of the following document is to enumerate the different fields controlling design attributes in the SDK.
Brand
Name | Description | Default | Example |
<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)
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<color name="lp_header_text_color"> | Day/date header text color | Dark gray (#46474a) | |
<color name="lp_header_background_color"> | Day/date header background color | @android:color/white | |
Message Edit Text
Name | Description | Default | Example |
<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" text | FALSE | |
Connection Status Bar
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<bool name="scroll_down_indicator_enabled"> | Enable/disable the scroll down indicator (shown or invisible). True by default | TRUE | |
<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
Name | Description | Default | Example |
<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)
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<integer name="snachbar_duration_for_accessibility"> | Number of milliseconds to show the TTR snackbar if the accessibility TalkBack option is on | 60,000 | |
<bool name="announce_agent_typing"> | Announce when the agent is typing. This is applicable only in Activity mode | TRUE | |
Custom Fonts
Name | Description | Default | Example |
<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
Name | Description | Default | Example |
<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 | |