Alterar o tema, o estilo e a marca do WebChat do Flex
No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementação do Flex, considere usar o Flex Conversations.
O WebChat do Flex usa a mesma estrutura de temas do Flex UI (IU do Flex). Com a estrutura de temas do Flex UI (IU do Flex), você pode:
- Usar temas pré‐configurados
- Definir seu próprio tema
- Substituir o tema dos componentes da interface do usuário para criar o estilo da interface do usuário na marca
Saiba mais em Temas, estilo e marca do Flex UI (IU do Flex).
Estilo do WebChat na marca
Por padrão, o WebChat tem uma aparência neutra. Para estilizá‐lo para sua marca, você precisará substituir a configuração de cores dos componentes do WebChat. Isso pode ser feito em 2 etapas:
- Defina a configuração de marca para os componentes que deseja alterar
- Substitua o objeto
colorTheme
pela sua configuração de marca no appConfig
Definição da configuração de marca em webchat-branding.js
const brandColor1 = "#1976d2";
const brandColor2 = "#233659";
const brandTextColor = "#ffffff";
const personalizedColors = {
darkBlueBackground: "#3C425C",
whiteText: "#FFFFFF",
entryPointBackground: "#3C425C",
lighterBackground: "#ecedf1",
primaryButtonBackground: "#1976d2",
primaryButtonColor: "#FFFFFF",
secondaryButtonBackground: "#6e7180",
secondaryButtonColor: "#FFFFFF"
};
// assign
const brandMessageBubbleColors = (bgColor) => ({
Bubble: {
background: bgColor,
color: brandTextColor
},
Avatar: {
background: bgColor,
color: brandTextColor
},
Header: {
color: brandTextColor
}
});
const brandedColors = {
Chat: {
MessageListItem: {
FromOthers: brandMessageBubbleColors(brandColor2),
FromMe: brandMessageBubbleColors(brandColor1),
},
MessageInput: {
Container:{
Button: {
background: brandColor1,
color: brandTextColor
}
}
},
MessageCanvasTray: {
Container: {
background: personalizedColors.darkBlueBackground,
color: personalizedColors.whiteText
}
},
},
MainHeader: {
Container: {
background: personalizedColors.darkBlueBackground,
color: personalizedColors.whiteText
},
Logo: {
fill: brandTextColor
}
},
EntryPoint: {
Container: {
background: personalizedColors.entryPointBackground,
color: personalizedColors.whiteText
}
},
PreEngagementCanvas: {
Container: {
background: personalizedColors.lighterBackground
},
Form: {
SubmitButton: {
background: personalizedColors.primaryButtonBackground,
color: personalizedColors.whiteText
}
}
}
};
Configuração do WebChat para usar webchat-branding
Adicione a seguinte configuração ao arquivo appConfig
var appConfig = {
colorTheme: {
overrides: brandedColors
}
}
Componentes da interface do usuário do WebChat e objetos para os quais temas podem ser definidos
Você pode encontrar uma lista completa dos componentes para os quais temas podem ser definidos aqui. Abaixo está a lista dos componentes do WebChat para os quais temas podem ser definidos.
MainContainer: {
background: colors.base1
},
EntryPoint: {
Container: {
backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,
backgroundColor: "rgba(0,0,0,0)",
color: "#ffffff",
"&:hover": {
backgroundColor: colors.buttonHoverColor,
backgroundBlendMode: "color",
}
}
},
MainHeader: {
Container: {
color: textColor
},
Logo: {
fill: lightTheme ? "#000000" : "#ffffff"
}
},
PreEngagementCanvas: {
Container: {
color: textColor
},
Footer: {
color: textColor
},
Form: {
SubmitButton: {
"background-image":
`linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,
color: "#ffffff"
},
Label: {}
}
},
InvalidPreEngagementCanvas: {
Container: {
color: textColor
},
Button: {
background: colors.defaultButtonColor,
color: colors.lightTextColor
}
},
Modal: {
Container: {
background: colors.base2,
color: textColor,
},
Title: {
color: textColor
},
PrimaryButton: {
background: colors.base2,
color: textColor,
},
SecondaryButton: {
background: colors.base2,
color: textColor,
}
},
Chat: {
MessagingCanvas: {
Container: {
background: colors.base1
}
},
MessageList: {
DateSeparatorLine: {
borderColor: colors.base4
},
DateSeparatorText: {
color: textColor
},
TypingIndicator: {
color: textColor
}
},
MessageInput: {
Container: {
background: colors.base2,
color: textColor,
"::placeholder": {
color: textColor
},
Button: {
color: "#ffffff",
background: "#1976D2"
}
}
},
MessageListItem: {
FromMe: {
Avatar: {
color: "#ffffff",
background: "#1976D2"
},
Bubble: {
color: "#ffffff",
background: "#1976D2"
},
Header: {
color: "#ffffff",
}
},
FromOthers: {
Avatar: {
color: colors.base11,
background: colors.base2
},
Bubble: {
color: textColor,
background: colors.base2
},
Header: {
color: textColor
}
},
ReadStatus: {
color: textColor
}
},
MessageCanvasTray: {
Container: {
background: colors.base2,
color: textColor
},
Button: {
color: colors.lightTextColor,
background: colors.defaultButtonColor,
lightHover: false,
}
},
WelcomeMessage: {
Container: {
color: textColor
},
Icon: {
color: colors.base11
}
}
},
Progress: {
Circular: {
staticBackgroundBorderColor: colors.lightTextColor,
animatingBackgroundBorderColor: colors.base4,
animatingForegroundBorderColor: colors.defaultButtonColor,
}
},
FormComponents: {
TextArea: {
borderColor: colors.base4,
color: textColor,
background: "transparent",
"&:focus": {
background: colors.base1,
boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,
border: `1px solid ${colors.focusColor}`
}
},
Input: {
color: textColor
}
},
Precisa de ajuda?
Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.