Customization options

Change default settings to enhance your brand

The OpenWeb Android SDK allows you to customize the appearance of different app features to create a seamless UI and branding experience for your users.



User experience

The ConversationOptions.Builder() allows you to customize aspects of the conversation user experience, such as the theme and comment sort order.


Use the following steps to configure the appearance of the Pre-Conversation fragment and Conversation:

  1. In your Activity or Fragment, use ConversationOptions.Builder() to create and define a ConversationOptions object named options.

    Supported Configuration Settings:
val themeMode = SpotImThemeMode.DARK
val backgroundColor = Color.parseColor("#000000")
val options = ConversationOptions.Builder()
    .addTheme(SpotImThemeParams(false, themeMode, backgroundColor))
    .configureArticle(
        Article(
            "URL", "THUMBNAIL_URL", "TITLE", "SUBTITLE")
        )
    .addSortType(SortType.SORT_NEWEST)
    .build()
  1. Add the options argument to the Pre-Conversation fragment, Conversation, or create a comment screen in the Activity.
SpotIm.getPreConversationFragment(CONVERSATION_ID, options, object : 
SpotCallback<Fragment> {
    override fun onSuccess(fragment: Fragment) {
        // doSomething...
    }

    override fun onFailure(exception: SpotException) {
        // doSomething...
    }
})
SpotIm.getConversationIntent(context, CONVERSATION_ID, options, object :
    SpotCallback<Intent> {
        override fun onSuccess(intent: Intent) {
            startActivity(intent)
        }
        override fun onFailure(exception: SpotException) {
            // Handle error here
    }
})
SpotIm.getCreateCommentIntent(context, CONVERSATION_ID, options, object :
    SpotCallback<Intent> {
        override fun onSuccess(intent: Intent) {
            startActivity(intent)
        }

        override fun onFailure(exception: SpotException) {
            // Handle error here
    }
})
  1. (Optional) Monetize the Conversation.

PreConversation style

setPreConversationStyle(OWPreConversationStyle) sets the preConversation appearance.

val options = ConversationOptions.Builder()
    .setPreConversationStyle(style)
    .build()
Argument Description
style OWPreConversationStyle Initial appearance style

Possible values:
  • OWPreConversationStyle.OldRegular
  • : (Default) preConversation is expanded
  • OWPreConversationStyle.Compact
  • : Preview of one comment. When the comment is tapped, the Conversation screen displayssg

Number of displayed comments

addMaxCountOfPreConversationComments(counter) limits the number of comments a Pre-Conversation fragment displays.

val options = ConversationOptions.Builder()
    .addMaxCountOfPreConversationComments(4)
    .build()
Argument Description
counter Int Integer between 0-16 that determines number of comments displayed

Default: 2

If this argument is < 0, only 2 comments are displayed.
If this argument is > 16, a maximum of 16 comments are displayed.

Sort order

setInitialSort(sortOption) sets up a SpotImSortOption parameter that defines the initial sort order of comments.

val options = ConversationOptions.Builder()
    .setInitialSort(SpotImSortOption.BEST)
    .build()
Argument Description
sortOption SpotImSortOption Type of sort order

Possible values:
  • SpotImSortOption.BEST
  • SpotImSortOption.NEWEST
  • SpotImSortOption.OLDEST

Sort options naming

setCustomSortByOptionText(sortOption, R.string.customTitle) establishes the custom name of a comment.

val options = ConversationOptions.Builder()
    .setCustomSortByOptionText(SpotImSortOption.BEST, R.string.customTitle)
Argument Description
sortOption SpotImSortOption Type of sort order

Possible values::
  • SpotImSortOption.BEST
  • SpotImSortOption.NEWEST
  • SpotImSortOption.OLDEST
r.string.customTitle Custom text for comment name

Color theme

addTheme(SpotImThemeParams(isSupportSystemDarkMode, themeMode, backgroundColor)) sets up a SpotImThemeParams class that sets the sorting background color and the Conversation theme.

val themeMode = SpotImThemeMode.DARK
val backgroundColor = parseColor("#000000")

val options = ConversationOptions.Builder()
    .addTheme(SpotImThemeParams(false, themeMode, backgroundColor))
    .build()
Argument Description
isSupportSystemDarkMode Boolean Defines if the Partner app supports system dark mode

This should be set to false to enable the themeMode argument to be defined by addTheme().
themeMode OpenWeb theme to be applied to the Pre-Conversation and Conversation

Possible values:
  • SpotImThemeMode.LIGHT: (Default) Light theme. Use this theme for pages with a light background. If using the default theme, this attribute does not need to be included.
  • SpotImThemeMode.DARK: Dark theme. Use this theme for pages with a dark background.
backgroundColor Int Background color for the Pre-Conversation fragment and Conversation when the themeMode is SpotImThemeMode.DARK.

The value of this argument is ignored when the themeMode is SpotImThemeMode.LIGHT.

Current article details

configureArticle(Article("URL", "THUMBNAIL_URL", "SUBTITLE")) sets up an Article class that defines the current article.

📘

Please contact your PSM to learn more about comment labels and set remote configurations related to comment sections or labels.


When custom labels are set up in the config, call configureArticleSection() with a custom section name to enable or override the existing default section.

val options = ConversationOptions.Builder()
    .configureArticleSection("SECTION_NAME")
    .build()

🚧

In the following scenarios, configureArticleSection should not be called:

  • If the default comment label section is set up in the config, comment labels will be enabled on all Conversations. There is no need to call configureArticleSection.
  • If the comment label config is not set up, calling configureArticleSection will have no effect.

Article header visibility

To hide the article header, set .setDisplayArticleHeader(false)

val options = ConversationOptions.Builder()
    .setDisplayArticleHeader(false)
    .build()

Read-only status

setReadOnly(readOnlyMode) controls whether additional comments can be added to a specific article.

val readOnlyMode = ReadOnlyMode.DEFAULT
val options = ConversationOptions.Builder()
    .setReadOnly(readOnlyMode)
    .build()
Argument Description
readOnlyMode readOnlyMode State of read-only mode

This attribute must be set to true to prohibit additional comments or replies from being posted.

Possible values:
  • ReadOnlyMode.DEFAULT
  • ReadOnlyMode.DISABLE
  • ReadOnlyMode.ENABLE


UI Elements

The CustomUIDelegate allows you full access to customize UI components, such as the login prompt, Conversation footer, navigation title, and more. Customizing different components enables you to adjust elements as if the UI were your own.

2088

Use the following steps to configure the captions of different UI components:

  1. Set a CustomUIDelegate.
SpotIm.setCustomUIDelegate(object: CustomUIDelegate {
    override fun customizeView(viewType: CustomizableViewType, view: View, isDarkModeEnabled: Boolean) {
        when (viewType) {
            CustomizableViewType.LOGIN_PROMPT_TEXT_VIEW -> {
                val textView = view as? TextView
                // set your own customization
            }
      // set more customizations to another CustomizableViewType
    }
  }
}
  1. Define and customize the CustomizableViewType.

CustomizableViewType Reference

#CustomizableViewType optionCustomizableViewType script
1Login prompt TextViewLOGIN_PROMPT_TEXT_VIEW
2Say control TextView in Pre-conversationSAY_CONTROL_IN_PRE_CONVERSATION_TEXT_VIEW
3Say control TextView in conversationSAY_CONTROL_IN_CONVERSATION_TEXT_VIEW
4Community question TextViewCOMMUNITY_QUESTION_TEXT_VIEW
5Conversation footer ViewCONVERSATION_FOOTER_VIEW
6Navigation title TextViewNAVIGATION_TITLE_TEXT_VIEW
7Community guidelines TextViewCOMMUNITY_GUIDELINES_TEXT_VIEW
8Create Comment action buttonCOMMENT_CREATION_ACTION_BUTTON
9Read-only labelREAD_ONLY_TEXT_VIEW
10Empty state read-only labelEMPTY_STATE_READ_ONLY_TEXT_VIEW
11Pre-conversation header title TextViewPRE_CONVERSATION_HEADER_TEXT_VIEW
12Pre-conversation header comments counter TextViewPRE_CONVERSATION_HEADER_COUNTER_TEXT_VIEW
13Show more comments buttonSHOW_COMMENTS_BUTTON


Fonts

You can replace the OpenWeb Android SDK's default fonts with your own custom fonts. Using custom fonts tailors the viewer experience to your brand.

Use the following steps to add custom fonts to your app:

  1. In the app module in Android Studio, add your font to the res/font directory.

    In the following screenshot, three fonts have been added to the res/font directory:

    • big_shoulder_bold.ttf
    • big_shoulder_italic.ttf
    • big_shoulder_regular.ttf
994
  1. Create publisher_custom_font_family.xml file with the following code.
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <!-- regular -->
    <font
        android:font="@font/big_shoulder_regular"
        android:fontStyle="normal"
        android:fontWeight="400"

        app:font="@font/big_shoulder_regular"
        app:fontStyle="normal"
        app:fontWeight="400" />

    <!-- italic -->
    <font
        android:font="@font/big_shoulder_italic"
        android:fontStyle="normal"
        android:fontWeight="400"

        app:font="@font/big_shoulder_italic"
        app:fontStyle="italic"
        app:fontWeight="400" />

    <!-- bold -->
    <font
        android:font="@font/big_shoulder_bold"
        android:fontStyle="normal"
        android:fontWeight="700"

        app:font="@font/big_shoulder_bold"
        app:fontStyle="normal"
        app:fontWeight="700" />

</font-family>
  1. In res/values/styles.xml, add the following entries.
<style name="SpotIm.Theme.Dark.Language">
    <item name="android:fontFamily">@font/publisher_custom_font_family</item>
    <item name="fontFamily">@font/publisher_custom_font_family</item>
</style>

<style name="SpotIm.Theme.Light.Language">
    <item name="android:fontFamily">@font/publisher_custom_font_family</item>
    <item name="fontFamily">@font/publisher_custom_font_family</item>
</style>