Freshchat - Temas e personalizações do Android SDK : Suporte ao Cliente - Bravo Solutions

1. Selecionando um tema existente

O SDK do Freshchat depende do appcompat-v7 para fornecer compatibilidade com versões anteriores, portanto, todos os temas do Freshchat são herdados dos temas Theme.AppCompat.*. Para alternar o tema aplicado aos componentes SDK do Freshchat, altere o pai de Theme.Freshchat.SelectedTheme para uma das variantes de Theme.Freshchat.* no styles.xml do seu aplicativo

Exemplo:

<style name="Theme.Freshchat.SelectedTheme" parent="@style/Theme.Freshchat.Light.DarkActionBar" />

O SDK do Freshchat vem com Theme.Freshchat.Light e Theme.Freshchat.Light.DarkActionBar

2. Crie e aplique um tema personalizado

Os temas do SDK do Freshchat são construídos sobre o sistema de temas do Android e, como tal, suportam os atributos de temas padrão do Android para itens como cor de fundo da ActionBar, cor do texto da ActionBar, cor da barra de status etc.

Por exemplo, para personalizar colorPrimary , inclua o seguinte.

<item name="colorPrimary">@color/my_awesome_color</item>

Aqui está uma lista de personalizações específicas do Freschat SDK:

2.1 Aparência do Texto

O SDK do Freshchat oferece suporte à alteração da aparência do texto para vários elementos no SDK. Você pode consultar os estilos padrão de implementação de aparência de texto aqui .

Nota: * TextStyles listados são estilos de visualização Android padrão, normalmente para visualizações de texto e, portanto, textAppearance pode incluir qualquer uma das personalizações como textColor , textSize  etc.

Etapas para personalizar a aparência do texto

Etapa 1: definir a aparência de texto personalizada como um estilo

Por exemplo, o estilo MyCustomTextAppearance é definido como

<style name="MyCustomTextAppearance" parent="TextAppearance.AppCompat.Medium"><item name="android:textColor">@color/textColorPrimary</item><item name="android:textColorHighlight">@color/textColorHighlight</item><item name="android:textColorHint">@color/textColorHint</item><item name="android:textColorLink">@color/textColorLink</item><item name="android:textSize">16sp</item><item name="android:textStyle">bold</item></style>

Etapa 2: Mapeie o estilo T ext Appearance para um atributo personalizado textAppearance predefinido do Freshchat .

Por exemplo, o estilo MyCustomTextAppearance definido acima é a aparência de texto do estilo freshchatChannelNameTextStyle

<style name="MyCustomTheme" parent="Theme.Freshchat.Light.DarkActionBar"><item name="freshchatChannelNameTextStyle">@style/CustomChannelNameTextStyle</item></style> <style name="CustomChannelNameTextStyle" parent="Widget.Freshchat.ChannelName">    <item name="android:textAppearance">@style/MyCustomTextAppearance</item></style>

Etapa 3: defina o tema personalizado para todas as atividades do SDK do Freshchat. A maneira mais simples de fazer isso é substituir e definir o pai de Theme.Freshchat.SelectedTheme no styles.xml / themes.xml do seu aplicativo

<style name="Theme.Freshchat.SelectedTheme" parent="MyCustomTheme" />

Como alternativa, se você quiser aplicar temas diferentes para cada atividade, inclua as entradas de atividade no AndroidManifest.xml do seu aplicativo e substitua o tema a partir daí.

Por exemplo, inclua o tema personalizado como atributo android:theme e tools:replace para permitir a substituição do tema por fusão de manifesto.

Para obter uma lista de atividades do Freshchat SDK, você pode consultar este manifesto do Freshchat Android SDK .

<activity        android:name="com.freshchat.consumer.sdk.activity.ChannelListActivity"        android:theme="@style/MyCustomTheme"        tools:replace="android:theme" /><activity        android:name="com.freshchat.consumer.sdk.activity.ConversationDetailActivity"        android:theme="@style/MyAlternateTheme"        tools:replace="android:theme" />

2.2 Visualização de Personalização de Aparência

O Freshchat SDK permite personalizar a aparência das seguintes visualizações. Se a exibição for uma exibição de contêiner de texto, a aparência do texto também poderá ser personalizada como parte do estilo

freshchatChannelNameTextStyle -> Estilo para visualização do nome do tópico
freshchatChannelDescriptionTextStyle -> Estilo para a exibição de descrição do tópico
freshchatChannelLastUpdatedAtTextStyle -> Estilo para o tópico atualizado pela última vez na visualização
freshchatChannelUnreadCountTextStyle -> Estilo para a exibição de contagem de tópicos não lidos
freshchatChannelListStyle -> Estilo de exibição de lista de tópicos
freshchatChannelListItemStyle -> Estilo para cada Tópico na lista
freshchatChannelAltIconStyle -> Estilo para exibição alternativa para o ícone Tópico quando o ícone não está presente

freshchatTeamMemberNameTextStyle -> Estilo para visualização do nome do membro da equipe
freshchatUserMessageTextStyle -> Estilo para exibição de mensagem do usuário
freshchatTeamMemberMessageTextStyle -> Estilo para exibição de mensagem de membro da equipe
freshchatUserMessageTimeTextStyle -> Estilo para exibição de tempo de mensagem do usuário
freshchatTeamMemberMessageTimeTextStyle -> Estilo para exibição de tempo de mensagem de membro da equipe
freshchatMessageListStyle -> Estilo de visualização da lista de mensagens
freshchatMessageListItemStyle -> Estilo para cada item na lista de mensagens
freshchatMessageButtonStyle -> Estilo para o botão nas mensagens
freshchatMessageReplyInputViewStyle -> Estilo para o campo Edittext de entrada de mensagem para o usuário
freshchatConversationBannerMessageStyle -> Estilo para a visualização do banner na parte superior da tela de detalhes da conversa/lista de mensagens

freshchatFAQCategoryListStyle -> Estilo de exibição de lista de categorias de perguntas frequentes
freshchatFAQCategoryListItemStyle -> Estilo para cada categoria de FAQ na lista
freshchatFAQCategoryAltIconStyle -> Estilo para exibição alternativa para ícone de categoria quando o ícone não está configurado
freshchatFAQCategoryNameTextStyle -> Estilo para exibição de nome de categoria de FAQ
freshchatFAQCategoryDescriptionTextStyle -> Estilo para exibição de descrição de categoria de FAQ
freshchatFAQListEmptyTextStyle -> Estilo para visualização vazia da lista de perguntas frequentes

freshchatFAQListStyle -> Perguntas frequentes / estilo de exibição de lista de artigos
freshchatFAQListItemStyle -> Estilo para cada item na FAQ / Lista de artigos

freshchatFAQVotingPromptTextStyle -> FAQ Voting Prompt Estilo do Textview
freshchatFAQVotingPromptViewStyle -> Estilo do prompt de votação do FAQ
freshchatFAQUpvoteButtonStyle -> Estilo para o botão upvote no prompt de votação para FAQ
freshchatFAQDownvoteButtonStyle -> Estilo para o botão downvote no prompt de votação para FAQ

2.3 Drawable e Ícones

Os ícones a seguir podem ser substituídos substituindo o atributo do tema e especificando um drawable diferente para o mesmo em seu tema personalizado.

<!-- Action Icons --><item name="freshchatSendIcon">@drawable/freshchat_ic_send</item><item name="freshchatCancelIcon">@drawable/freshchat_ic_cancel</item><item name="freshchatAttachIcon">@drawable/freshchat_ic_attach</item><!-- ActionBar Menu Icons --><item name="freshchatSearchIcon">@drawable/freshchat_ic_action_search_light</item><!-- Misc Icons--><item name="freshchatTeamMemberAvatarIcon">@null</item><item name="freshchatContactUsIcon">@drawable/freshchat_ic_action_contact_us</item><!-- Chat Bubbles --><item name="freshchatChatBubbleLeft">@drawable/freshchat_chat_bubble_left</item><item name="freshchatChatBubbleRight">@drawable/freshchat_chat_bubble_right</item>

2.4 Personalização de String do SDK

Com o SDK do Freshchat, você pode personalizar strings nos componentes da interface do usuário que ficam visíveis para o usuário final. Aqui está uma lista de todas as strings que podem ser personalizadas. Copie o par chave-valor do strings.xml vinculado acima e adicione-o ao strings.xml do seu aplicativo e atualize o valor conforme necessário.

Por exemplo, para alterar o título da página da lista de tópicos da mensagem, inclua a seguinte string em strings.xml

<string name="freshchat_activity_title_channel_list">Conversations</string>

2.5 Ícones de notificação

Para alterar seus ícones de notificação, consulte a seção " Personalizando notificações" no documento Etapas de integração aqui .

2.6 Personalizando o nome do tópico e a mensagem de boas-vindas

Navegue até Admin > Tópicos para personalizar o título da interface de conversa e a mensagem padrão.

Recentemente, atualizamos nossa marca em nossas ofertas e alteramos os nomes de nossos planos de preços. Se você se inscreveu antes de 9 de agosto de 2021, clique em Planos anteriores para visualizar seus planos aplicáveis. 
Garantimos que essa alteração não afetará sua experiência com o produto e nenhuma ação é necessária de sua parte.