Skip to main content

Skinning & Customization

Important
Helpshift’s Legacy SDKs (SDK Version <=7.x.x) reached their end of life on 31 Dec 2022, and end of support on 31 March 2023. Please upgrade to the Latest SDK if you haven't already.

Skinning & Customization

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.

Introduction

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.

Theming and Skinning

Helpshift Android SDK comes with following themes -

  • Helpshift.Theme.Light.DarkActionBar (default)
  • Helpshift.Theme.Light
  • Helpshift.Theme.Dark
  • Helpshift.Theme.HighContrast
  • Helpshift.Theme.DayNight.DarkActionBar
  • Helpshift.Theme.DayNight.Light
  • Helpshift.Theme.DayNight.HighContrast
Helpshift.Theme.DarkHelpshift.Theme.HighContrastHelpshift.Theme.LightHelpshift.Theme.Light.DarkActionbar

To make the Helpshift SDK look like your app, please follow the steps given below -

  1. Define your custom helpshift theme in your styles.xml and inherit it from one of the Helpshift themes mentioned above.
  2. Create a style named Helpshift.Theme.Base and set its parent to your custom helpshift theme.

For example:

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.

Helpshift styleable attributes

FieldSummary
colorPrimaryThe primary branding color for the app.
colorPrimaryDarkDark variant of the primary branding color.
colorAccentBright complement to the primary branding color.
titleTextColorColor of the Toolbar title string.
navigationIconDrawable to use for the navigation button located at the start of the Toolbar (back button).
homeAsUpIndicatorDrawable to use for the 'home as up' (back button when SearchView is expanded) indicator.
android:windowBackgroundDrawable to use as the overall window background.
android:textColorPrimaryThe most prominent text color.
android:textColorSecondarySecondary text color.
android:textColorHintColor of hint text (displayed when the field is empty).
hs__tabTextColorColor of the text in a tab on FAQ section pager screen
hs__tabSelectedTextColorColor of the text in the selected tab on FAQs section pager screen
hs__chatBubbleUserTextColor of user text in conversation.
hs__chatBubbleUserLinkColor of links in user's text in conversation.
hs__chatBubbleUserBackgroundColorColor applied to the background of user message bubble
hs__chatBubbleAdminTextColor of admin text in conversation.
hs__chatBubbleAdminLinkColor of links in admin's text in conversation.
hs__chatBubbleAdminBackgroundColorColor applied to the background of admin message bubble
hs__chatBubbleMediaBackgroundColorColor of the background shown in the attachment message or QuickSearch Bot FAQs message bubble.
hs__chatBubbleMediaBorderColorColor of the border shown in the attachment message bubble.
hs__composeBackgroundColorColor of the active 'send' button on the conversation screen. Background color of the 'jump to latest message' button.
hs__selectableOptionColorColor of the text in the option pills of the QuickSearch Bot or 'skip' button. Color of the 'jump to latest message' icon.
hs__tabletConversationContainerBackgroundColorColor used as background for Tablets
hs__typingIndicatorColorColor of typing indicator shown in Conversation screen
hs__attachmentBackgroundColorColor used as background for attachment meta data info while filing new issue.
hs__separatorColorColor of horizontal or vertical separators in the SDK.
hs__searchHighlightColorColor the highlighted text in search results.
hs__footerPromptBackgroundColor of footer background in FAQ and Conversation screens.
hs__expandedPickerIconColorColor of collapse (down arrow), search, clear, back icons in the list picker's expanded mode.
hs__collapsedPickerIconColorColor of expand (up arrow) icon in the list picker's collapsed mode
hs__messageSendIconIcon for button used to send a message in conversation screen.
hs__searchOnNewConversationDoneActionButtonIconIcon for button used to close FAQ screen in form based search results flow.
hs__startConversationActionButtonIconIcon for button used to start a new conversation in form based flow.
hs__conversationActionButtonIconIcon for button used to open a conversation on the FAQ screen.
hs__searchActionButtonIconIcon for button used to start a search in FAQ screen.
hs__attachScreenshotActionButtonIconIcon for button used to attach an image on the conversation screen.
hs__faqTextColorLinkColor of links in FAQ content.

Styleable attributes in action

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.

Helpshift dimensions

You can use the following dimension to change certain aspect of the SDK. These dimensions are independent of the theme set for the SDK.

For example:


<dimen name="DIMENSION_NAME">VALUE</dimen>

DimensionSummaryDefault value
hs_support_recyclerview_item_vertical_paddingTop 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 results16dp
hs__chatBubbleMarginLeft and right margin on the message chat bubbles in conversation screen16dp

Changing theme at runtime

From SDK version 5.2.0 onwards, SDK provides the ability to set a theme for all Helpshift SDK screens at runtime. This theme needs to inherit one of the Helpshift themes. To set the theme, you need to pass a theme resource name as the parameter. For example:


HelpshiftCocos2dx::setTheme("MyCustomHelpshiftThemeName");

You can reset an existing theme to the default theme declared for the Helpshift activity by passing null or invalid string as the theme resource name parameter. For example:


HelpshiftCocos2dx::setTheme(NULL);

Dark Mode support

From SDK version 5.2.0 onwards, SDK supports dark mode theming. To enable the dark mode switching feature, you need to create a theme by inheriting one of the Helpshift.Theme.DayNight themes in your app:

  • Helpshift.Theme.DayNight.DarkActionBar
  • Helpshift.Theme.DayNight.Light
  • Helpshift.Theme.DayNight.HighContrast

Customizing the dark mode themes

You can customize the dark mode theme just like you would customize any other Helpshift theme like below:


<style name="MyCustomHelpshiftTheme" parent="Helpshift.Theme.DayNight.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"/>

Enable/disable dark mode switching at runtime

To enable or disable dark mode switching at runtime programatically, use the Android API referred here.

Orientation support

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.

Lock the Helpshift SDK window to landscape/portrait mode :

Use one of the following solutions to lock the Helpshift SDK window to landscape/portrait mode, irrespective of the app's orientation.

Using screenOrientation config:

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.

By specifying the orientation for Helpshift Activity in AndroidManifest.xml :

If you are using gradle :

Add the Helpshift activity to your app's AndroidManifest.xml file with the attribute android:screenOrientation="landscape" or 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.

If you are using ant build / Eclipse based project:

Locate the AndroidManifest.xml file in Helpshift project and add attribute android:screenOrientation="landscape" or android:screenOrientation="portrait" to Helpshift's ParentActivity in AndroidManifest.xml file.