Styling the Web Chatbot channel

Modify the styling of the Web Chatbot channel to fit your business needs and requirements. You can customize the Cascading Style Sheets (CSS) styles and also customize the user interface used for user input and chat responses.

Before you begin: Embed a chat window on a web page for a Web Chatbot channel. For more information, see Embedding a chat window for the Web Chatbot channel.

For example, add your own icons or additional useful information, such as date and time stamp for each chat message.

Note: The styling changes you make in the system affect all Web Chatbot channels that are defined in a Pega Platform application.
  1. In Dev Studio, click the name of your application, and then click Channels and interfaces.
  2. Update the Web Chatbot channel section used for user input.
    1. Edit the pyRenderSimulatorInbound section.
    2. Make user interface changes in the section.
    3. Click Save.
  3. Update the Web Chatbot channel section used for the response.
    1. Edit the pyRenderSimulatorOutbound section.
    2. Make user interface changes in the section.
    3. Click Save.
  4. Change the CSS styles for the Web Chatbot channel.
    1. Edit the pyWebChatCustomization rule.
    2. Modify the CSS styles, for example, for the background color, client input, submit area, header text, or submit button.
    3. Click Save.