Adding a background image to my guide
If you were ever curious about how to add an image to your guides (for some extra flare) here's a quick 1-minute video on we add background images to some of our internal guides.
Below is the code that was used in the example, just keep in mind that this is simply an example of custom CSS we have used and that you will ultimately need to personalize it to your needs.
#pendo-guide-container {
border-left: 5px solid #A973F2 !important;
background-image: url("https://pendo-static-5668600916475904.storage.googleapis.com/NpHgADVgBO9SbYUeWFkiSSOzOZs/guide-media-821e8745-9ae2-49a3-a79f-6b5ede03ca3f") !important;
background-repeat: no-repeat !important;
}
5
コメント
Absolutely, wonderful. Thanks a lot, this was very helpful. I dont know how to work with CSS, can you please drop a few more of these gems here with some good background images, it would be really beneficial for all.
Jatin Khanna glad this is helpful! If you want to edit this, you'll just need to replace the background url I have in my example with another hosted image.
background-image: url("replace with your URL") !important;This was incredibly helpful.
Hi guys! This is awesome. However, when I active the guide, the imagem background don't appear. By any chance, anyone had the same problem?
I have the same issue. as Jessica.
I have the same problem. Uploaded image doesn't display
For those having issues with display...are you hosting the image on your own server or Pendo's? If your own maybe you are running into some kind of firewall issue? Something you could try is to create a "dummy" guide with an image block and upload your background there. Then grab the Pendo-hosted URL for the image that it creates and use that in your custom code. Of course syntax is essential with getting that custom code to work. Have you tried copying and pasting the actual sample code from above to see if you can get that to work? That image URL is still viable.
I am uploading an image to the "announcing a new feature" template guide. To do this, I delete the url for the default image, delete the default image, replace it by uploading a small JPG (<1 MB), and save changes.
The new image does not show in preview. It does show in the "edit imaging block" and in Pendo, under the guide settings.
I am hitting a bug in this that I'm really hoping the Pendo team can tackle.
I've successfully got the custom code loading and my background image is showing up, BUT, I want to change the background image on various step and this isn't working. While I've got the custom code block on each step and a different image URL in each of them, the same background image from the most recently updated code block persists for all my guide steps. Am I doing something wrong here? Or is this just not the right behaviour? What I want to do is have a different image as the background of each step, and thus I've put a different image src link in each steps code block. I don't understand why it would be persisting one image throughout all of them.
I also can't directly report this bug to the team because I'm on a basic account, and that bars any direct communication...
Alex Young-Davies I did a quick test and I am able to display different backgrounds on each step. You might try pasting the URL to the respective images in a browser window just to confirm they are each associated with different images. If that's confirmed then, perhaps your browser is caching the image in some way across steps?
Eric Miller So I went and tried a couple other methods and found of that the code WAS actually working as intended, it was simply displaying wrong in the builder preview mode. When I went to the actual website to test it, it seemed to work. So it was a bug with the preview mode in the builder I guess.
サインインしてコメントを残してください。