Learn about Skinning the Helpshift SDK to match the look-n-feel of your app. Customize localizable strings to support multiple languages in the SDK UI.
If you want to customize Helpshift SDK theme as per your app's theme, see Theming and Skinning
If you want to change strings used in the SDK's UI or want to translate them as per device language, see String Customization.
For theming of Helpshift SDK v3.12.0 and below refer theming and skinning older SDKs.
Helpshift Android SDK comes with following themes -
To make the Helpshift SDK look like your app, please follow the steps given below -
You can give the Material look and feel of your app to Helpshift SDK by customizing very few attributes as follows:
<style name="MyCustomHelpshiftTheme" parent="Helpshift.Theme.Light.DarkActionBar"> <item name="colorAccent">@color/your_custom_color</item> <item name="colorPrimary">@color/your_custom_color</item> <item name="colorPrimaryDark">@color/your_custom_color</item> </style> <style name="Helpshift.Theme.Base" parent="MyCustomHelpshiftTheme"/>
You can customize Android's styleable attributes along with Helpshift's styleable attributes.
|colorPrimary||The primary branding color for the app.|
|colorPrimaryDark||Dark variant of the primary branding color.|
|colorAccent||Bright complement to the primary branding color.|
|titleTextColor||Color of the Toolbar title string.|
|navigationIcon||Drawable to use for the navigation button located at the start of the Toolbar (back button).|
|homeAsUpIndicator||Drawable to use for the 'home as up' (back button when SearchView is expanded) indicator.|
|android:windowBackground||Drawable to use as the overall window background.|
|android:textColorPrimary||The most prominent text color.|
|android:textColorSecondary||Secondary text color.|
|android:textColorHint||Color of hint text (displayed when the field is empty).|
|hs__chatBubbleUserText||Color of user text in conversation.|
|hs__chatBubbleUserLink||Color of links in user's text in conversation.|
|hs__chatBubbleUserBackgroundColor||Color applied to the background of user message bubble|
|hs__chatBubbleAdminText||Color of admin text in conversation.|
|hs__chatBubbleAdminLink||Color of links in admin's text in conversation.|
|hs__chatBubbleAdminBackgroundColor||Color applied to the background of admin message bubble|
|hs__composeBackgroundColor||Color of the active send button on conversation screen.|
|hs__tabletConversationContainerBackgroundColor||Color used as background for Tablets|
|hs__typingIndicatorColor||Color of typing indicator shown in Conversation screen|
|hs__attachmentBackgroundColor||Color used as background for attachment meta data info while filing new issue.|
|hs__separatorColor||Color of horizontal or vertical separators in the SDK.|
|hs__searchHighlightColor||Color the highlighted text in search results.|
|hs__inboxTitleTextColor||Color of title text of a message in campaigns inbox list.|
|hs__inboxTitleUnreadTextColor||Color of title text of a message in campaign inbox list when message is unread.|
|hs__inboxTimeStampTextColor||Color of message time stamp text in campaigns inbox list.|
|hs__inboxTimeStampUnreadTextColor||Color of meesage time stamp text in campaign inbox list when message is unread.|
|hs__inboxBodyTextColor||Color of body text of a message in campaign inbox list.|
|hs__inboxSwipeToDeleteBackgroundColor||Background color of message in campaign list when it is being swiped for deletion.|
|hs__inboxSwipeToDeleteIconColor||Color of delete icon which is displayed when user is swiping a campaign message for deletion.|
|hs__inboxIconBackgroundColor||Background color of default icon image of a message (Displayed when icon image is not available).|
|hs__inboxSeparatorColor||Color of horizontal or vertical separators in campaigns inbox.|
|hs__footerPromptBackground||Color of footer background in FAQ and Conversation screens.|
The following illustrates use of these styleable attributes over Helpshift SDK's UI:
hs__tabletConversationContainerBackgroundColor is used only on tablets, to surround the conversation card.
You can use the following dimension to change certain aspect of the SDK. These dimensions are independent of the theme set for the SDK.
||Top and bottom padding of each item in the Recyclerview Item. Any value less than 16 is ignored and will have no effect. This affects the Recyclerview Item used for FAQ list, FAQ sections list and search results||16dp|
By default, the Android SDK will obey the orientation of the device. If the device rotates to landscape mode, the SDK will update its UI to landscape orientation. Rotating back to portrait mode will bring the UI back to portrait orientation.
Use one of the following solutions to lock the Helpshift SDK window to landscape/portrait mode, irrespective of the app's orientation.
You can programmatically set the orientation for the Helpshift SDK using the
screenOrientation install configuration, documented here. This config takes precedence over the orientation set in AndroidManifest.xml.
Add the Helpshift activity to your app's AndroidManifest.xml file with the
android:screenOrientation="portrait" as given below.
<activity android:name="com.helpshift.support.activities.ParentActivity" android:theme="@style/Helpshift.Theme.Activity" android:screenOrientation="landscape" />
This will merge the screenOrientation attribute to the activity in Helpshift's AndroidManifest.xml file.
Locate the AndroidManifest.xml file in Helpshift project and add
android:screenOrientation="portrait" to Helpshift's ParentActivity in AndroidManifest.xml file.