Images and customization of portals

[bruno12345]

Hello everyone, does anyone know how to add background images to portals to make them look nicer? I wanted to follow the example shown in a Pickaxe video, but I can’t find those functions in the portal customization section. Perhaps I have to add them through code injection? It only lets me add an icon to the portal, but not a background image. I wanted to try to replicate the style and design of the portals in the Pickaxe example video.

[hurmuli]

At the moment only way to do that is to use custom CSS and link from another page. For example your own Amazon S3 bucket, imgur or some other site that hosts the images.

[brandoo]

I filed an feature request about that, Add a image background to the tchat

[jeanette]

@hurmuli is right, custom CSS through code injection is the way to go right now.

Here is a quick example of what the CSS looks like if you want a background image on your Studio portal:

body {
  background-image: url('https://your-image-host.com/your-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

You paste that into the Code Injection section of your Studio settings. For hosting the image, any public URL works. If you already have a website, you can upload the image there and grab the direct URL. Imgur works too if you just need something quick.

A couple of tips from doing this myself:

• Use images that are not too busy. Your tools and text need to be readable on top of it, so go with something subtle or add a semi-transparent overlay in your CSS.
• Keep the file size reasonable. A 5MB background image will slow down your portal load time noticeably.
• Test on mobile. Background images that look great on desktop can be hard to read on smaller screens. The background-attachment: fixed property does not work on most mobile browsers, so keep that in mind.

The new Site Editor is still rolling out improvements, so native background image support might come eventually. @brandoo’s feature request is a good one to upvote.

[brandoo]

@jeanette

'

I try hard with your code, I inject in the Body, in the Header, nothing work, with different source of wallpaper.

When I inject in the body nothing happen, when I inject in the header I just have a small strip of one centimeter of my wallpaper or I just have my link written in full letter.

[brandoo]

This is my result when I inject the code in header, I try different link to wallpaper from different source.

Can you help me ? Just try to have a beautiful wallpaper in background of my tchat

body {
background-image: url(‘your-image-host.com);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

[danny_support]

Hi @brandoo ,

Thank you for reaching out!

The code you tried there needs a few adjustments to work properly. Please try this instead in the Header section of Website Code Injection:

<style>
  html, body, #__next, #__next > main {
    min-height: 100%;
    background: transparent !important;
  }

  #__next {
    position: relative;
    isolation: isolate;
  }

  /* Full-page wallpaper */
  #__next::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?cs=srgb&dl=pexels-pixabay-33545.jpg&fm=jpg"); /*YOUR IMAGE HERE */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  }

  /* Kill any older overlay code if it is still present */
  body::before,
  body::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* Portal home root wrapper */
  #__next > main > div:first-child {
    background: transparent !important;
  }

  /* Portal hero section */
  #__next > main > div:first-child section:first-of-type {
    background: transparent !important;
  }

  /* Open tool / agent root wrapper */
  [data-panel-group] > [data-panel] > div[class*="pickaxe-root"] {
    background: transparent !important;
  }

  /* Keep the chat input area readable without adding a page-wide tint */
  [data-panel-group] textarea {
    background: transparent !important;
  }

  [data-panel-group] textarea::placeholder {
    opacity: 0.7 !important;
  }

  [data-panel-group] textarea,
  [data-panel-group] button,
  [data-panel-group] svg,
  [data-panel-group] p,
  [data-panel-group] h1,
  [data-panel-group] h2,
  [data-panel-group] h3,
  [data-panel-group] span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
</style>

Just make sure to replace YOUR-IMAGE-URL-HERE with the direct public URL of the image you want to use.

This should give the portal a full-page wallpaper effect behind the main portal experience.

We also appreciate the feedback regarding native support for portal background images without requiring custom CSS injection. I have passed that feedback along to the team, and thank you as well for the feature request. It is being discussed internally.

Thank you again for bringing this up and for submitting the feature request.

[brandoo]

Thank you Danny

Your code works perfectly