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 just add the following CSS code to the Landing page CSS at the bottom of the Bot Settings (requires developer mode)

.quriobotWidgetButton {
  background: transparent;
  box-shadow: none;
}

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


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 making 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.




Need more help or looking for inspiration? Join the Quriobot community!

Quriobot
Friendly & Fun
Interact & Convert