Alterar o tema, o estilo e a marca do WebChat do Flex

No momento, você está lendo a documentação do Flex Legacy Messaging. Se você estiver começando com uma nova implementaçã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), você pode:

Usar temas pré‐configurados
Definir seu próprio tema
Substituir o tema dos componentes da interface do usuário para criar o estilo da interface do usuário na marca

Saiba mais em Temas, estilo e marca do Flex UI (IU do Flex).

Estilo do WebChat na marca

Por padrão, o WebChat tem uma aparência neutra. Para estilizá‐lo para sua marca, você precisará substituir a configuração de cores dos componentes do WebChat. Isso pode ser feito em 2 etapas:

Defina a configuração de marca para os componentes que deseja alterar
Substitua o objeto colorTheme pela sua configuração de marca no appConfig

Definição da configuraçã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
            }
        }
    }
};

Configuração do WebChat para usar webchat-branding

Adicione a seguinte configuração ao arquivo appConfig

var appConfig = {
    colorTheme: {
        overrides: brandedColors
    }
}

Componentes da interface do usuário do WebChat e objetos para os quais temas podem ser definidos

Você pode encontrar uma lista completa dos componentes para os quais temas podem ser definidos aqui. Abaixo está 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.