How create a floating button in page

Hello Radzen team, could you so kind to explain how insert in page a floating button like your chat button in
Radzen site?
Is there a tutorial for this in documentation?


Do you want the button to appear in every page? If yes you can edit the Main layout and drag and drop a Button component in the Footer (which is already fixed at the bottom).

If you want the button to appear only in specific page do the following:

  1. Drag and drop a button in the page

  2. Set its Position property (under Style) to fixed. This makes the button float via the position: fixed CSS attribute.

  3. Set the Bottom and Right properties to specify the exact position you want the button to appear.

    If the button appears below certain elements you will have to set its z-index. At the moment Radzen doesn't allow this via the property grid but you can manually edit the JSON file of your page (meta\pages\<page-name>json):

               "icon": "",
               "name": "button1",
               "style": {
                 "bottom": "100px",
                 "position": "fixed",
                 "zIndex": 5000,
                 "right": "100px"
               "text": "Floating button",
               "type": "button"

Hi Korchev, thanks for your suggestion. I confirm you that I have insert the floating button with success, but
I have these questions:

  1. the setting of zIndex is deleted if I modify the page or layout by Radzen. How I can preserve it when file
    json of the page is rewrite of the Radzen?

  2. How I can obtain the same aspect of your chat button in your site, that is shadow and icon?

  3. How I can adjust the icon dimension of the button? If I change button size, the icon not change its

  4. Could you so kind to do a example how open a slide panel when floating button is pressed, similar
    your chat panel in your site?

Thanks a lot.