Bug: setThemeColorforiOS not working properly [fixed]

[dieptang]

@Angu-G I want to report few bugs directly here:

`ZohoSalesIQ.setChatTitle("Support title"); ZohoSalesIQ.startChat("The invoice incorrectly");

// either ZohoSalesIQ.openChat(); ZohoSalesIQ.setConversationVisibility(true);`

1. On react native, after I call the code above for set the title and the content, then after I end the chat, and I click Launcher button for make new conversation, it's always take old content "The invoice incorrectly" and the old title. How I can empty these content on new chat?

2. I'm not found the customize background color for send button from the chat. I checked all page here but did not found https://www.zoho.com/salesiq/help/developer-section/android-mobile-sdk-theme-customization-chat-input.html

3. Suggestion: For the React Native, it should be able to customize string and color directly, currently I must come to android/strings.xml and ios pod path for customize everything. Also for Android if should be have the function for set themeColor like from IOS, that we set the primary color only and everything on Chat should be change accordingly.

[Angu-G]

Hello @dieptang,

1. On react native, after I call the code above for set the title and the content, then after I end the chat, and I click Launcher button for make new conversation, it's always take old content "The invoice incorrectly" and the old title. How I can empty these content on new chat?

It is intended to work in this way. If you want to clear the old message, you can try it out by passing an empty string in the API or if you want to replace the old content with a new one, pass the new message(title) before initiating the chat.

2. I'm not found the customize background color for send button from the chat. I checked all page here but did not found

Attribute name colorAccent can be used to change the color of the send button. We will document the same.

3. Suggestion: For the React Native, it should be able to customize string and color directly, currently I must come to android/strings.xml and ios pod path for customize everything. Also for Android if should be have the function for set themeColor like from IOS, that we set the primary color only and everything on Chat should be change accordingly.

And regarding this suggestion, We will check for the feasibility and let you know.

If you need real-time assistant in customization or have further queries/suggestions, please drop a mail to us at support[at]zohosalesiq[dot]com so that we can help you through a session and get it cleared in a single stretch.

[dieptang]

@Angu-G thanks for your reply.

Converning to (2). It should be something like

<item name="siq_chat_message_backgroundcolor_visitor">@color/primary</item>

Can you document it here more clearly?

I have new issue, How can I customize the color and text strings for IOS? I found the guide below but I don't know where to put these code. And the customize for the text language also not documented yet for IOS.

[Angu-G]

Converning to (2). It should be something like

<item name="siq_chat_message_backgroundcolor_visitor">@color/primary</item>

Can you document it here more clearly?

The attribute you specified will be used to change the visitor sent messages bubble background color.

Example code for colorAccent attribute: <item name="colorAccent"><your color code></item>

I have new issue, How can I customize the color and text strings for IOS? I found the guide below but I don't know where to put these code. And the customize for the text language also not documented yet for IOS.

Regarding your query for iOS, you may use the ZohoSalesIQ.setThemeColorforiOS() API to set the overall theme color. However, if you wish to customize the theme more extensively as shown in the native SDK documentation in react native, it would involve including the code to set a custom theme within the plugin's source by creating a fork.

You may use the same .setChatTitle() API for iOS as well for setting the title. Extensive string customization has not been supported yet in iOS although this is in our roadmap.

[dieptang]

@Angu-G Yes, The colorAccent work fine now.

Concerning to the themecolor on IOS, I call function ZohoSalesIQ.setThemeColorforiOS("#E7272D"); , but it;s not working. Still showing default blue color, can you please check one again?

[dieptang]

Update: The function SetThemeColorforIOS only working sometime. It's not stable working. For example, it's changed the color from the menu End chat only. All other section still blue.

I suppose it's a bug.

Another problem, that from the IOS, We cannot work with the UIModel

=====

{ modalRef.current.setModalVisible(false); }} actionSubmit={() => { modalRef.current.setModalVisible(false); ZohoSalesIQ.setConversationVisibility(true); }} title={'Question?'} content={'Do you want connect to support chat?'} txtReject={'No'} txtSubmit={'Yes'} />

============

It's showing up, then closing immediately, please try reproduce from your side.

[Rishabh-Raghunath]

Hello @dieptang, could you confirm that the setThemeColorforiOS API is invoked immediately after calling the init API?

Regarding your second query with the shared code snippet,

actionSubmit= {() => {
    modalRef.current.setModalVisible(false);
    ZohoSalesIQ.setConversationVisibility(true);
}};

We see that the ZohoSalesIQ.setConversationVisibility API is invoked after calling dismiss on a modal. The above API is used to toggle the conversations history page within the SDK UI and does not function to open the SDK if this is the intended flow.

[dieptang]

@Rishabh-Raghunath Yes, I confirm there are an issue here, the setThemeColorforiOS is called after the Init function.

ZohoSalesIQ.init("ios_app_key","ios_access_key"); ZohoSalesIQ.setThemeColorforiOS("#E7272D"); ZohoSalesIQ.setLauncherVisibility(true);

[Rishabh-Raghunath]

Interesting. Could you try using the below code snippet instead?

ZohoSalesIQ.initWithCallback("ios_app_key" ,"ios_access_key", (_) => {
  ZohoSalesIQ.setThemeColorforiOS("#E7272D");
  ZohoSalesIQ.setLauncherVisibility(true);
});

We have fixed a minor issue relating to the behavior described by you in an upcoming update. But we hope the above snippet of code works for you.

[dieptang]

@Rishabh-Raghunath confirmed it's not work properly also with initWithCallback, sometime it's colored, sometime it's showing default color. For example, I open the launcher, it's showing default color - blue, click on new chat - showing my color (red), then sometime switch back default color.

It should be change the main color on everything from blue to my color.

Also another thing, How Can we deactivate night mode? because my application doesn't support night mode. Thank you.

[Rishabh-Raghunath]

We shall investigate this further and keep you posted. To disable dark mode support in the application, set the value of the UIUserInterfaceStyle property to Light in the application's Info.plist file.

[hieplam]

i'm having same issue on setThemeColorforiOS, it seems custom color applied at the first time open SalesIq chat. But after playing around chat, default color is override. Is there any way to work around while waiting for the next release fix?

[hieplam]

@dieptang for customize text strings in ios, i found a work around for this.

go to Pods//Mobilisten/Mobilisten.xcframework/[[BUILDPLATFORM]]/Mobilisten.framework there are lots of localization files named LCLocalizable_[Region code].strings

pick any file you want to customize, change extension to .plist, open and edit the text to language you want.

You can do that. as a temporary work around to localize sales iq chat on iOS

[Rishabh-Raghunath]

Hello @dieptang and @hieplam, We have now released an update, version 4.0.1 where the issue with setting the theme color should be addressed.

We request you to try updating to the latest version and ensure that the setThemeColorforiOS API is invoked right after using the init API.

[hieplam]

setThemeColorforiOS worked as expected , thanks

[dieptang]

@Rishabh-Raghunath Thank for updating, I will try and update back to you.

[dieptang]

@Rishabh-Raghunath Thanks for resolve the issue, working mostly fine now. I found 2 small issue

1. When connected to the operator.

2. Open status still green

[dieptang]

@dieptang for customize text strings in ios, i found a work around for this.

go to Pods//Mobilisten/Mobilisten.xcframework/[[BUILDPLATFORM]]/Mobilisten.framework there are lots of localization files named LCLocalizable_[Region code].strings

pick any file you want to customize, change extension to .plist, open and edit the text to language you want.

You can do that. as a temporary work around to localize sales iq chat on iOS

The new LCLocalizable_[Region code].strings file should be put on the same folder Pods//Mobilisten/Mobilisten.xcframework/[[BUILDPLATFORM]]/Mobilisten.framework right ?

Seems not able to edit with xcode, even I renamed to plist.

[hieplam]

The new LCLocalizable_[Region code].strings file should be put on the same folder Pods//Mobilisten/Mobilisten.xcframework/[[BUILDPLATFORM]]/Mobilisten.framework right ? ==> Yes, just overwrite it.

for open and change it. Try to close all xcode process -> change file from .strings to .plist and open it. In my machine, it open using xCode

Also , change its back to .strings after you edit text, and run ios, the text should be effect now :))

[dieptang]

The new LCLocalizable_[Region code].strings file should be put on the same folder Pods//Mobilisten/Mobilisten.xcframework/[[BUILDPLATFORM]]/Mobilisten.framework right ? ==> Yes, just overwrite it.

for open and change it. Try to close all xcode process -> change file from .strings to .plist and open it. In my machine, it open using xCode

Also , change its back to .strings after you edit text, and run ios, the text should be effect now :))

Strange. I overwritten LCLocalizable_EN.strings and/or add LCLocalizable_VI.strings also not working. Closed xcode also not helpful. Any hint? Thanks

[Rishabh-Raghunath]

Hi @dieptang, the color applied in the open chat badge and the connected information background is green by design and the theme color is not applied in the mentioned places using the setThemeColorforiOS API.

However, if you are able to import Mobilisten in the AppDelegate in native code as shown below:

#import <Mobilisten/Mobilisten.h>

Changing the chat open badge color is possible using the native Theme APIs. You may refer to the Conversation.ListItem.openBadgeBackgroundColor attribute. You may add this to the application(_:didFinishLaunchingWithOptions:) method.

Example:

  UIColor *themeColor = UIColor.redColor;
  SIQTheme *theme = [[ZohoSalesIQ Theme] baseTheme];
  [theme setThemeColor:themeColor];
  [[[theme Conversation] ListItem] setOpenBadgeBackgroundColor:themeColor];
  [[ZohoSalesIQ Theme] setThemeWithTheme:theme];

Note: You would need to remove the usage of setThemeColorforiOS API if you are setting a new theme this way. The above code also sets the theme color.

Changing the color of the connected information background is not possible at the given moment. We shall keep you posted once this is added to the framework in a future update.

[arthedza]

Hi @dieptang, the color applied in the open chat badge and the connected information background is green by design and the theme color is not applied in the mentioned places using the setThemeColorforiOS API.

However, if you are able to import Mobilisten in the AppDelegate in native code as shown below:

#import <Mobilisten/Mobilisten.h>

Changing the chat open badge color is possible using the native Theme APIs. You may refer to the Conversation.ListItem.openBadgeBackgroundColor attribute. You may add this to the application(_:didFinishLaunchingWithOptions:) method.

Example:

  UIColor *themeColor = UIColor.redColor;
  SIQTheme *theme = [[ZohoSalesIQ Theme] baseTheme];
  [theme setThemeColor:themeColor];
  [[[theme Conversation] ListItem] setOpenBadgeBackgroundColor:themeColor];
  [[ZohoSalesIQ Theme] setThemeWithTheme:theme];

Note: You would need to remove the usage of setThemeColorforiOS API if you are setting a new theme this way. The above code also sets the theme color.

Changing the color of the connected information background is not possible at the given moment. We shall keep you posted once this is added to the framework in a future update.

Tried this but got an error

[arthedza]

https://github.com/zoho/SalesIQ-Mobilisten-ReactNative/issues/47