Customize a Conversation

Through several methods and your Admin Dashboard, OpenWeb enables you to configure the appearance of the Conversation and pre-conversation fragment. This article explains the features that can be configured and how to configure each.

In-app settings

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

val themeMode = SpotImThemeMode.DARK
val backgroundColor = Color.parseColor("#000000")
val options = ConversationOptions.Builder()
    .addMaxCountOfPreConversationComments(2)
    .addTheme(SpotImThemeParams(false, themeMode, backgroundColor))
    .configureArticle(
        Article(
            "URL", "THUMBNAIL_URL", "TITLE", "SUBTITLE")
        )
    .addSortType(SortType.SORT_NEWEST)
    .build()

SpotImThemeMode themeMode = SpotImThemeMode.DARK;
int backgroundColor = Color.parseColor("#00000");
SpotImThemeParams themeParams = new SpotImThemeParams(false, themeMode, backgroundColor);   

ConversationOptions options = ConversationOptions.Builder()
    .addMaxCountOfPreConversationComments(2)
    .addTheme(themeParams)
    .configureArticle(new Article(
        "URL", "THUMBNAIL_URL", "TITLE", "SUBTITLE"))
    .addSortType(SortType.Companion.getSORT_NEWEST())
    .build()

Add the options argument to the pre-conversation fragment in your Activity.

SpotIm.getPreConversationFragment(CONVERSATION_ID, options, object : 
SpotCallback<Fragment> {
    override fun onSuccess(fragment: Fragment) {
        // doSomething...
    }

    override fun onFailure(exception: SpotException) {
        // doSomething...
    }
})

SpotIm.getPreConversationFragment(CONVERSATION_ID, options, 
new SpotCallback<Fragment>() { 
    @Override 
    public void onSuccess(Fragment fragment) { 
        // doSomething...
    } 
    
    @Override 
    public void onFailure(SpotException exception) { 
        // doSomething... 
    } 
});

Class ConversationOptions.Builder

Builder for ConversationOptions

addMaxCountOfPreConversationComments(counter)

Defines the number of comments shown in the pre-conversation fragment

val options = ConversationOptions.Builder()
    .addMaxCountOfPreConversationComments(4)
    .build()

ConversationOptions options = ConversationOptions.Builder()
    .addMaxCountOfPreConversationComments(2)
    .build()

Argument	Description
counter `Int`	Integer between `0` - `16` Default: `2` If this argument is less than `0`, two comments are displayed. If this argument is greater than `16`, only a maximum of sixteen comments are displayed.

addSortType(sortType)

Sets up a SortType parameter that defines the sort order of comments shown in the pre-conversation fragment

val options = ConversationOptions.Builder()
    .addSortType(SortType.SORT_BEST)
    .build()

ConversationOptions options = new ConversationOptions.Builder()
    .addSortType(SortType.Companion.getSORT_BEST())
    .build();

Argument	Description
sortType `SortType`	Type of sort order Possible values include the following: • (Default) `SortType.SORT_BEST` • `SortType.SORT_NEWEST` • `SortType.SORT_OLDEST`

addTheme(SpotImThemeParams(isSupportSystemDarkMode, themeMode, backgroundColor))

Sets up a SpotImThemeParams class that defines the sorting background color and Spot.IM theme

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

val options = ConversationOptions.Builder()
    .addTheme(SpotImThemeParams(false, themeMode, backgroundColor))
    .build()

SpotImThemeMode themeMode = SpotImThemeMode.DARK;
int backgroundColor = Color.parseColor("#00000");
SpotImThemeParams themeParams = new SpotImThemeParams(false, themeMode, backgroundColor);

ConversationOptions options = ConversationOptions.Builder()
    .addTheme(themeParams)
    .build()

Argument	Description
isSupportSystemDarkMode `Boolean`	Defines if the Partner app support system dark mode This should always 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 include the following: •`SpotImThemeMode.DARK` •`SpotImThemeMode.LIGHT`
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`.

configureArticle(Article("URL", "THUMBNAIL_URL", "SUBTITLE"))

Sets up an Article class that defines the current article

val options = ConversationOptions.Builder()
    .configureArticle(
        Article(
            "URL", "THUMBNAIL_URL", "TITLE", "SUBTITLE")
    )
    .build()

new ConversationOptions.Builder()
    .configureArticle(new Article(
    "URL", "THUMBNAIL_URL", "TITLE", "SUBTITLE"))
    .build();

setDisplayArticleHeader(false)

Set to false to hide Article header. Article header will be displayed by default or by setting to true

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

new ConversationOptions.Builder()
    setDisplayArticleHeader(false)
    .build();

configureArticleSection("SECTION_NAME")

Set article section name to display relevant comment labels.

Please contact support to learn more about comment labels and request setting remote configure related to comment sections and labels info.

If default comment label section is set up in the config, comment labels will be enable on all conversations and there is no need to call configureArticleSection.
If custom comment labels are set up in the config, call configureArticleSection with custom section name to enable or overide existing default section.
If comment label config is not set up calling configureArticleSection will have no effect.

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

new ConversationOptions.Builder()
    configureArticleSection("finance")
    .build();

Admin Dashboard settings

From your Admin Dashboard, you can configure the following elements:

Style of the avatars displayed in a conversation
Color of the "Show More Comments" button in the pre-conversation fragment
Color of the title of your company's admin users

From your OpenWeb Admin Dashboard, click Settings > DESIGN.
In the Site Color section, choose a color. The color you choose is the color of the "Show More Comments" button in the pre-conversation fragment and the title of your company's admin users.
In the Avatars Style section, select one of the avatar schemes.