Simple Virtual Tour - Tutorials | How to use Custom CSS / JS?

How to use Custom CSS / JS?

Andrea

Last Update hace 2 meses

For advanced users, the system allows you to inject custom code to modify the appearance or functionality of the platform. You can target the public-facing Viewer (where users see your tours) or the administrative Backend (the dashboard) separately.

Select Settings, from side menu. Go to tab Custom CSS / JS Headers.

Targeting: You can choose to apply your custom code specifically to the Viewer (where users see your tours) or the Backend (the admin dashboard). This ensures scripts only run exactly where they are intended.

Custom CSS: Add your own stylesheets to change colors, hide specific UI elements, or fine-tune layouts to match your branding perfectly.

Custom JS: Inject JavaScript to implement custom event tracking, create interactive behaviors, or connect third-party integrations not available by default.

Custom Head Elements: Insert HTML code directly into the <head> section of the page. This is primarily used for adding meta tags, favicons, tracking pixels, or linking to external resource libraries.

Custom Head PHP Code: Execute server-side PHP scripts before the page is rendered. This is an advanced tool ideal for managing session data, implementing custom redirects, or handling complex dynamic content logic.

[!CAUTION] Technical Warning: Custom code—especially PHP and JS—can significantly affect system performance and stability. Ensure your code is thoroughly tested before deployment.

As an example, we can show the inclusion of JS code with the CRISP chat widget for the backend.