Articles in this section

Styling the BotXO Widget

Kevin Pihl Jensen
  • Updated
Follow

Styling can be a crucial part of integrating your chatbot onto your website, as the format, look and call to action can be essential when attracting traffic to your chatbot. At this point, you might want to grab your web designer, as we will provide you with some code for the chatbot’s icon, which you can play around with. Please refer to our documentation on implementing the chatbot to find the BotXO Widget script. 

In this article we will go through:

 

Webchat JavaScript injection in the HTML code

This script will enable the chatbot icon on your side and is identical to the script you can find in Bot Settings under channels. Please copy and paste the JavaScript below at the end of the head element (before the tag) on your website.

<script src="https://me.botxo.co/sdk/webchat.js">
</script>
<script>
initBotXOChat({
id: XXXXXXXXX, // Bot Deployment UUID provided by the platform buttonColor: "#XXXXXXX" //background color of the button
});
</script>

 

Default values

The default values, which you can change can be seen below. In properties, you will see an overview of what can be changed in the default values. Please copy/paste the code below:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

Properties

Properties are things you can add to your script to customize the look and placement of the BotXO widget.

 

Env (optional): string 

The environment your web chatbot will take the code from. Another possible value is “test”, which makes use of functions that are currently being tested internally. We do not recommend changing the default value.

 

Deployment ID (required)

The deployment_ID of your chatbot is required in the script, as it links to your bot. The value can also include a referrer id as an URL parameter, which will make the chatbot launch the conversation on that specific module. Please see this article to learn how to find a module's referral URL. 

{
   id: "42f12025-1178-48f7-8dc3-572f4be16875"
}

 

Width (optional): number

If you want to adjust the size of the chat you can change the width in pixels. Make sure that the height and width are accordingly to each other. See an example of how to insert width in a script here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

Height (optional): number

The height of the webchat window in pixels. See an example of how to insert height in a script here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

buttonLogoOpen (optional): string (URL) 

This is the image you see when the chatbot window is closed and this is also where you can change the standard chatbot widget icon with something you have customized. To do this you will need the URL to the photo, you want to replace the standard widget with. Please see the below example of how to insert the buttonLogoOpen property.

<script src="https://me.botxo.co/sdk/webchat.js">
</script>
<script>
  initBotXOChat({
    id: "c756edd9-f8f9-42e6-8572-172df8854bdf",
    buttonColor: "#0000ff",
    buttonLogoOpen: "www.inserttheurlforyourimagehere.com",
    autoloadDelay: 56,
    autoloadScrollOffset: 700
  });
</script>

The URL for the image should be put in quotation marks and if there are more properties to be added after the buttonOpenLogo, like in the above example, then please also add a comma after the URL string.

 

buttonLogoClose (optional): string (URL)

This is the button image to display when the webchat window is open. See an example of how to insert it here:

<script src="https://me.botxo.co/sdk/webchat.js">
</script>
<script>
  initBotXOChat({
    id: "c756edd9-f8f9-42e6-8572-172df8854bdf",
    buttonColor: "#0000ff",
    buttonLogoClose: "www.inserttheurlforyourimagehere.com",
    autoloadDelay: 56,
    autoloadScrollOffset: 700
  });
</script>

The URL for the image should be put in quotation marks and if there are more properties to be added after the buttonLogoClose, like in the above example, then please also add a comma after the URL string.

 

buttonColor (optional): string (Hex value) 

You can change the chatbot widget button’s background color. Only set a value in case you want to use the default buttonLogoOpen & buttonLogoClose icons. Please see an example of how it should be inserted here:

<script src="https://me.botxo.co/sdk/webchat.js">
</script>
<script>
  initBotXOChat({
    id: "c756edd9-f8f9-42e6-8572-172df8854bdf",
    buttonColor: "#0000ff",
    buttonLogoOpen: "www.inserttheurlforyourimagehere.com",
    autoloadDelay: 56,
    autoloadScrollOffset: 700
  });
</script>

 

buttonWidth (optional): number

If you want to change the size of the chatbot widget, you can do it in pixels. If you are using a custom buttonLogoOpen & buttonLogoClose set its value to the same as your image’s width. Please make sure the width is accordingly to the height of the button. An example of how to insert it can be seen here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

buttonHeight (optional): number 

The button height in pixels. If you are using a custom buttonLogoOpen & buttonLogoClose set its value to the same as your image’s height. An example of how to insert it in a script can be seen here:

{
   env: 'prod',
   id: undefined,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   zIndex: 10030
}

 

right (optional): number

The distance of the button in respect to the right side of the browser in pixels. An example of how to insert it can be seen here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

bottom (optional): number

The distance of the button in respect to the bottom side of the browser in pixels. An example of how to insert it can be seen here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

 

Z-index (optional)

The z-index specifies the stack order. The stack order should be seen in comparison to other elements on the site. The greater stack order the further to the front it will be. An example of how to insert it can be seen here:

{
   env: 'prod',
   id: undefined,
   width: 400,
   height: 600,
   buttonLogoOpen: "https://www.SITE.com/LogoOpen.png", //Change this URL
   buttonLogoClose: "https://www.SITE.com/LogoClose.png",  //Change this URL
   buttonColor: 'transparent',
   buttonWidth: 60,
   buttonHeight: 60,
   right: 40,
   bottom: 77,
   zIndex: 10030
}

Background (optional)

Background is the background color of the entire widget. You can set this value to "transparent" or a color code such as "#f5f7fb".

{
<script src="https://me.botxo.co/sdk/webchat.js">
</script>
<script>
  initBotXOChat({
    id: "c756edd9-f8f9-42e6-8572-172df8854bdf",
    buttonColor: "#0000ff",
    buttonLogoOpen: "www.inserttheurlforyourimagehere.com",
    autoloadDelay: 56,
    autoloadScrollOffset: 700,
    background: "transparent"
  });
</script>
}

Related articles

Comments

0 comments

Please sign in to leave a comment.