Have a free-floating startup button for your bot

Quriobot starts with the widget on the right (or left) side of your screen, but sometimes you want to have something different and free-floating start button.

Live example: https://quriobot.com/qb/qbtests/free-float

To get this start-up experience, add the following CSS code to the Landing page CSS at the bottom of the Bot Settings(requires developer mode)

.quriobotWidgetButton {
  background: transparent !important;
  box-shadow: none !important;

.quriobotWidgetButton::before {
  background-image: url('https://media.quriobot.com/control/img/optimized/23/4cf7c0b69111e8b1f34fd57c43e9e5/blob.png') !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 100px !important;
  left: -30px !important;

The first part, quriobotWidgetButton, makes sure that the rest of the button is not shown and the chosen image shows as free-floating

The second part, quriobotWidgetButton, is to show an image (you can use the URL to that image (can also be a GIF). Width and height make the image a bit bigger. Border-radius creates a circular border around the image, if you remove this you will see the original borders of your image. Lastly, the left part is to re-position that image.

Edit this page

See also