You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Cambiar el tema, el estilo y la marca de Flex WebChat

Actualmente estás leyendo documentación de mensajería antigua de Flex. Si estás empezando con una nueva implementación de Flex, considera la posibilidad de utilizar Flex Conversations.

Flex WebChat utiliza el mismo marco de trabajo de temas que Flex UI (la interfaz de usuario de Flex). Con el marco de trabajo de temas de Flex UI puedes hacer estas cosas:

  • Utilizar temas preconfigurados
  • Definir tu propio tema
  • Anular el tema de los componentes de la interfaz de usuario para que la interfaz tenga un estilo acorde a la marca

Más información en Tema, estilo y marca de Flex UI.

Dar un estilo a WebChat acorde a la marca

De manera predeterminada, WebChat tiene un aspecto neutral. Para adaptarlo a tu marca, tendrás que anular la configuración de color de los componentes de WebChat. Esto se puede realizar en dos pasos:

  1. Definir la configuración de personalización de marca para los componentes que desees cambiar
  2. Anular el objeto colorTheme con tu configuración de personalización de marca en appConfig

Definir la configuración de marca en 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
            }
        }
    }
};

Configurar WebChat para utilizar webchat-branding

Agrega la siguiente configuración al archivo appConfig

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

Componentes de interfaz de usuario de WebChat y objetos a los que se le puede cambiar un tema

Puedes encontrar una lista completa de los componentes a los que se le puede cambiar el tema aquí. A continuación, se muestra la lista de los componentes de WebChat a los que se les puede aplicar un tema.

        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
            }
        },
Calificar esta página:

¿Necesitas ayuda?

Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

Gracias por tus comentarios.

Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

Enviando tus comentarios…
🎉 Gracias por tus comentarios.
Se produjo un error. Inténtalo de nuevo.

Gracias por tus comentarios.

¡Recomiéndanos y gana USD 10 en 3 pasos sencillos!

Paso 1

Obtén un enlace

Obtén un enlace gratuito de referencia personal aquí

Paso 2

Regala USD 10

Tu usuario se registra y actualiza mediante el enlace

Paso 3

Obtén USD 10

1250 SMS gratuitos
O 1000 minutos gratuitos de voz
O 12 000 chats
O más