Help Center

Customise Landing Page

Landing page is the full page chat interface, this will be accessible from dedicated URL which can be accessed from any device. 
Let’s start with customising the Landing page appearance. 
landingpage

Adjusting appearances for the Landing page:

Here you will be able to adjust the appearances of the Landing page output like colorography, typography, background  etc.

  • Layout
    1. Use this to select the layout of landing page. 
    2. There are three layouts available to choose. 
    3. First layout  is the most suitable for desktop and mobile displays.
  • General
    1. Text: Use this to configure the typography like; Font, Font size and Font weight (bold or regular)
    2. Settings: Use this to show/hide the progress bar, you can also set the color of the progress bar
    3. Progress bar is shown to user when they interact with chat interface in landing page, and it progresses based on number of questions answered out of all.
    4. Chat branding: Use this to show/hide the WeConnect.chat branding on footer of the landing page.
    5. Landing page background: Use this to set the background of landing page. There are four types of backgrounds are available. Like, Solid color, gradient color, image and video as a background. 
    6. Default: Use default button to reset the default colors and appearances settings.

landing-page-general

  • Chat
    1. Chat style -> Message Bubble: Use this to change the shape of component output.
    2. Chat style -> Chatbox: Use this to adjust color appearances of component output.
      1. Solid color: Use this to set the solid color of the component
      2. Gradient color: Use this to set the gradient color of the component
      3. Text color: Use this to set the solid color of the text displayed on component
      4. Typing color: Use this to set the color of typing animation
    3. Opacity: Use this to adjust the opacity of landing page. Use slider to set opacity as per your need. 
    4. Chat style -> User response message:
      1. Background color: This will set the background color of the user response 
      2. Text color: This will set the text color for the user response
    5. Chat style -> Button style: This is to configure the appearances of buttons shown in output. Buttons are shown in some specific components like, multiple choice, carousel etc.
      1. Button Radius: This will set the corners of a button. Use this to show circular buttons like oval or rectangular shape.
      2. Button border color: This will set the border color of button
      3. Button background color: This will set the background color of button
      4. Button Text color: Use this to set the text color of the button.
    6. Profile picture & avatar:
      1. Profile picture: Use this to apply the picture (logo) to be shown in the landing page
      2. Avatar: This is the picture shown near question when it appears on output. You can upload your own avatar image or use from some options available.
      3. Image scale: Use this to change the scale of avatar and profile pic. This is helpful to make image either round or square.
  • Message
    1. This is mainly applicable to second and third layout of landing page
    2. Landing page creates the dedicated URL, Meta information is necessary to get these url’s crawled by SEO. Or at least whenever you share the Landing page it can generate the Meta preview.
    3. Title: Use to update the title like “Hi There!”
    4. Subtitle: Use this to update the subtitle. This is applicable only on the second and third layout like “How can I help you”
    5. Meta Title: Use this to change the header color and header text color.
    6. Meta Description: Use this option if you want to keep same color as chat components. We will see this in next point in detail.

 

landing-page-content

Related Contents