Company Logo
Go to UserGuidingCreate your own
Advice and answers from the UserGuiding Team
Getting Started
Introduction to UserGuiding
What Can I Achieve With UserGuiding?
Day 1: Intro to UserGuiding!
Installation
Embedding the Container Code
Embedding the Container Code With Google Tag Manager
Embedding the Container Code into Your WordPress Site
Chrome Extension
Downloading the Chrome Extension
Downloading the Chrome Extension on Chromium Browsers
Opening the Chrome Extension
Using the Step Editor in the Chrome Extension
Filtering Materials on the Chrome Extension
UserGuiding Now
UserGuiding Compass
UserGuiding FAQ
Which Browsers Does UserGuiding Support?
Do My End Users Need to Install the Chrome Extension to Display UserGuiding Content?
Can I Use UserGuiding on Mobile Apps/Websites?
Can I Create Materials on a Website I Don't Own?
Does UserGuiding Work with Single Page Applications?
Does UserGuiding Support Offline Mode?
Performance
Dashboard
Analytics Dashboard Overview
Goals
Defining and Tracking Goals
Impact Reports
Creating Impact Reports
Analyzing Impact Reports
Performance FAQ
How Can I Use the Date Picker?
How Can I Export Analytics Data?
What is the Completion Rate?
How Do Onboarding Material Views Compare to Monthly Active Users?
Is Analytics Data in Real Time?
Users
Users Page
Users Page Overview
Managing Filters on the Users Page
Managing User Attributes on the Users Page
Using the AND/OR Conditions in Filters for Users
Exporting Users Data From the Users Page
User Details
Company Page Overview
Company Details Page Overview
User Identification
What Is User Identification?
Enabling User Identification
Enabling User Identification with Google Tag Manager
Testing User Identification
How to Identify Non-Logged Users in UserGuiding
Excluding Users From User Identification
Disabling User Identification
Custom Attributes
Sending User Attributes, Company Attributes and Tracking User Actions
Date Attribute Formats
Setting a Default Value to a User Attribute
Segmentation
What is Segmentation?
Creating and Editing User Segments
Uploading User Segments via CSV
Excluding Users From a Segment
Setting Segments to Materials
Creating Segments for HTML Elements or Text on Page
Displaying Materials Only to New Users
Displaying Materials Only to Myself
Monthly Active Users (MAU)
Monthly Active Users (MAU) Calculation
Utilizing MAU Quota Economically
Exceeding Monthly Active Users Quota
APIs
UserGuidingLayer Callback Functions
Getting a List of Completed Guides by an End-User
UserGuiding User API
Resetting User History
Rate Limit for the User API
Users FAQ
What Is a Web Session?
How Can I Identify the Users Who Interacted With a Material?
How Can I Filter Users by Relative Dates?
How Can I Delete Users in Bulk?
How Can I Retain User History Even if the Browser's Local Storage Is Cleared?
Can I Track Who Clicked a Button or Link on my Materials?
Do I Need to Implement User Identification for Each Domain?
Will Changes to My Content Impact Users' History?
Why Aren't My Browser or User Attributes Returning Results on the Users Page?
Is There a Limit to Attribute Sizes in UserGuiding?
Engagement
Guides
What Are Guides?
Utilizing Guides in Your Web Application
Creating Guides
What Is a Guide List?
Guide Step Types
Guide Steps Order
Deleting Steps in a Guide
Guide Settings
Guide Trigger Settings
Redirection settings
Making Guides live
Guide settings on the Chrome extension
Cloning Guides on the Chrome Extension
Displaying Guides in the Desired Order
Creating Guides That Span Across Different URLs
Interaction with the Highlighted Area
Adding forms into the Guides
Creating Conditional Guides
Displaying Guides Until Completion
Removing the Delay When Skipping a Guide Step
Previewing Guides
Merging two Guides
Selecting Elements in a Dropdown Menu
Setting autofill for the input fields
Triggering Guides via Hyperlink
Click Action Tracking
Step Analytics
Guide Reports
Hotspots
What are Hotspots?
What purpose can you use hotspots for?
Creating Hotspots
Hotspot Settings
Hotspot Redirection Settings
Customizing the Hotspot Beacon
Changing the Hotspot Beacon Z-index
Hotspots vs Guides
Click Action Tracking
Hotspot Reports
Banners
What are Banners?
Creating Banners
Banner Reports
Banner Trigger Settings
Customization
Filtering Materials on the Panel
Organizing Content with Material Tags
Adding components to Guides and Hotspots
Adding user attributes to Guides and Hotspots
Adding user attributes to the Onboarding Content
Adding images/GIFs and videos into Guides and Hotspots
Adding emojis into Guides and Hotspots
Inserting a hyperlink into content
Setting Delay for Materials
Requisite buttons & custom buttons
Adding Countdown Timer to Guides and Hotspots
Bulk actions for materials
Appear frequency options
Highlighting elements with dynamic HTML attributes
Moving content across different environments
Scheduling materials
What is a CSS selector, and when should I use it?
Using CSS selectors to highlight the right element
Selecting the parent/upper HTML element
Themes
What is a Theme?
Creating Themes
Using custom Themes in Guides and Hotspots
Language settings in Themes
Adding a custom font to a Theme
Applying RTL (Right to Left) Text Style
Customizing the Tooltip Highlight Box color
Removing the progress bar and step numbers from Guides
Styling Your Onboarding Content With CSS
Customizing the Quit Button for Guides and Hotspots
Engagement FAQ
Why is my Guide redirecting to its old targeting URL even though I changed it?
Why do I get the "Selected element is hidden" error?
Can I export my Guide's content?
Can I Use UserGuiding on a Browser Extension?
How can I fix a blurry video I embedded?
Can I Highlight Two HTML Elements at the Same Time?
Why is an incorrect HTML element being highlighted?
Why the tooltip highlight box is missing when I highlight an HTML element?
Can I Undo the Deletion or Removal of My Content in UserGuiding?
How can I select a container for my materials?
How can I reselect an HTML element?
Can I highlight elements within an iFrame?
How can I select a custom font if my font is not listed in Themes?
What's the difference between limited and full customization?
Why is the Custom Theme not applying to my Guide/Hotspot completely?
Widgets
Checklists
What are Checklists?
Utilizing Checklists in your web app
Creating Onboarding Checklists
Checklist Settings
Checklist progression option
Displaying Guides in a Checklist
Adding user attributes to a Checklist
Checklist Launcher icon settings
Hiding the Checklist when all steps are completed
Checklist Reports
Resource Centers
What Is the Resource Center?
Resource Center Modules
Creating and Styling the Resource Center
Adding user attributes to a Resource Center
Integrating a Knowledge Base into the Resource Center
Knowledge Base providers that are compatible with the Resource Center
Testing and Publishing your Resource Center
Resource Center Reports
Widgets FAQ
Can I Have Multiple Checklists on the Same URL?
Can the Checklist launcher icon be different on two different pages?
Is there a limit on the number of modules added to a Resource Center?
Feedback
Surveys
Creating Custom Surveys
Custom Survey Trigger Settings
Creating Logic Rules for Surveys
Adding User Attributes to a Survey
Survey Reports
Monitoring the Net Promoter Score
Identifying the Users who Responded to a Survey
AI Insights for UserGuiding Surveys
Feedback FAQ
Can I Have Multiple Surveys?
Can I receive an email notification for each Survey response?
Can the latest response from a user override the previous responses to a survey?
Product Updates
Product Updates
What is the Product Updates?
Creating and Configuring the Product Updates Page
Analyzing the Product Updates Report
Product Updates Boosters
Custom Domain for the Product Updates
Language Management in Product Updates Page
Controlling Access to Your Product Updates Page
Knowledge Base
Knowledge Base
What Is the Knowledge Base?
Creating and Configuring the Knowledge Base
Language Management in Knowledge Base
Creating Knowledge Base Articles
Managing Knowledge Base Articles
Knowledge Base Categories and Subcategories
Adding Frequently Asked Questions and Featured Articles
Analyzing the Knowledge Base Report
Custom Domain for the Knowledge Base
UserGuiding Knowledge Base Integration within the Resource Center
Migrating Your Zendesk Knowledge Base to UserGuiding
Migrating Your Intercom Knowledge Base to UserGuiding
Controlling Access to Your Knowledge Base Content
Knowledge Base FAQ
How Can I Write Good Help Articles?
How to Organize Article Categories?
Can I Prevent Indexing My Articles and Posts?
AI Assistant
AI Assistant
What is AI Assistant?
Creating and Configuring the AI Assistant
Language Management in AI Assistant
Adding Sources for AI Assistant
Managing Usage for AI Assistant
Configuring AI Assistant's Handover
Testing AI Assistant
Setting AI Assistant Live
Analyzing the AI Assistant Report
Improving AI Assistant's Resolution Rate
Session Replay
Session Replay and Recordings
Playlists
Session Replay Settings
Developers
UserGuiding MCP Server
JavaScript API
JavaScript API Overview
User
Guides
Resource Center
Checklist
AI Assistant
Banners
Survey
Knowledge Base
Product Updates
Utilities
Security
UserGuiding with a Content Security Policy (CSP)
Identity Verification
Settings
Profile & Team
Adding a New Team Member
User Permission Levels for Roles
Changing Profile Information
Changing Account Email
Resetting Account Password
Unlinking Your Account From Google
Logging to UserGuiding With Google on Incognito Mode
Two-Factor Authenticator (2FA)
Single Sign-On With SAML2
Activity Log
Activity Log
Installation & Setup
Embedding the Container Code
Embedding the Container Code With Google Tag Manager
Embedding the Container Code into Your WordPress Site
Installing UserGuiding on Certain Pages Using GTM
Testing UserGuiding Installation
Containers
What Are Containers?
Displaying Content on Subdomains
Container Code Embed Status Warning
Integrations
HubSpot Integration
Webhook Integration
Amplitude Integration
Segment Integration
Google Analytics Integration
Mixpanel Integration
Woopra Integration
Intercom Integration
Slack Integration (Legacy)
Automating Intercom Emails and Messages based on your NPS Score
Salesforce Integration
UserGuiding Event Payloads
Data Management
Data Management Overview
Managing User Attributes and Events
Creating events using existing attributes
Creating Attributes for A/B Testing
No-Code Event Tracking
Page View Events
Localization
Localization and Multiple Language Management
Translating Content in Microsoft Excel
Subscription
Trying UserGuiding Without Committing
Redeeming Discount Coupons
Managing Your Subscription
Add-On Management
UserGuiding Branding
Rate Limiting
Rate Limiting Your Auto-Triggered Materials
Accessibility
Accessibility in UserGuiding
Settings FAQ
How Many Containers Can I Add?
Can I install UserGuiding on my Development Environment?
Does UserGuiding Work on the WordPress Admin Dashboard?
How Can I Know When the UserGuiding Script and JavaScript API Are Ready?
Would UserGuiding's Container Code slow down my web platform or trigger bugs?
Does UserGuiding offer an npm package?
Is Tax Included in the Pricing?
How Can I See My Current Plan?
Is the Pricing per Application or Domain?
Why am I Getting "Trial Is Over" Error While Having an Active Subscription?
Project Management
What is Project Management?
Project Overview
Creating and Managing Projects
Notifications
Notification Management
Custom Alerts
Targeting & Triggering
What is Page Targeting?
Changing Targeting Settings Using the Chrome Extension
Using Dynamic URLs for Targeting
Triggering Materials Using Regex
Setting the Page Targeting to a Resource Center
Launching a Checklist via JavaScript
Triggering a Guide via JavaScript
Testing Materials Before Going Live
Troubleshooting
Using UserGuiding Troubleshooter
Why can't I see my Guide live?
Why can't I see my Hotspot live?
Why can't I see my Checklist live?
Why can't I see my Resource Center live?
Why Is My Content not Visible After Enabling User Identification?
Troubleshooting a Guide step/Hotspot linked to an HTML element
What does "userGuiding' is not defined error' mean?
The solution to AdBlockers affecting UserGuiding
Why can't I see my Survey live?
Use Cases & Best Practices
Use Cases
Increasing Trial Conversions with UserGuiding's Modals
Announcing New Features to Increase Feature Adoption
In-app Communication to Drive Upgrades
Driving Product Adoption by Giving Users Lifecycle Nudges
Gathering Feedback with In-App User Testing Scheduler
In-app Announcements to Drive Engagement with Your Brand
User Onboarding Checklists to Onboard New Users
Segmenting New and Existing Users
Segmenting Users Based On Custom User Attributes, Company Attributes & Event Data
Self-service Support to Allow Users to Solve Problems on Their Own
Launching Live Chat through Resource Center’s Code Snippet Module
Optimizing Onboarding Sequences in SaaS Products Through In-App Surveys
Enhancing Feature Engagement with In-App Surveys
Evaluating New Features’ Effectiveness with In-App Surveys
Leveraging Surveys to Capture Upsell Opportunities
In-app Training to Educate Users About Advanced Features
Best Practices
Guide Length and Completion Rates
Set an objective
Why the first step is important
Don't Try to Teach Everything at Once
Meet and understand your audience
Avoid overwhelming your users
Protect the natural sense of discovery
Choosing which User Properties and Events to send to UserGuiding
Establishing a Baseline Metric to Monitor Progress Towards Success
Security & Compliance
GDPR Compliance
Health Insurance Portability and Accountability Act (HIPAA) Compliance
Switching to EU server
How does UserGuiding make use of browser cookies?
SOC 2 Type 1
SOC 2 Type 2
Home
Engagement
Themes
Customizing the Tool...
Customizing the Tooltip Highlight Box color
Is it possible to change the blue rectangle's color?

You have the ability to fully customize the outline color of any HTML element when highlighting it, by adjusting the settings within the Themes section.

 

This feature allows you to tailor the visual appearance of highlighted elements to match your design preferences, providing greater control over your website’s aesthetics and enhancing user experience.

 

Did this answer your question?
Related Articles
Can I highlight elements within an iFrame?
Using CSS selectors to highlight the right element
Why is an incorrect HTML element being highlighted?
Why the tooltip highlight box is missing when I highlight an HTML element?
Highlighting elements with dynamic HTML attributes