Download
Start a Project

QloApps Custom Code On Header | Add custom code on Website header

Index Share Tweet Save

The QloApps Custom Code on Header module allows hoteliers to easily add a customized section at the top of your website.

This module is designed to give you the flexibility to showcase important information such as sales announcements, festive offers, or any special promotions you wish to highlight.

By simply adding a custom code, you can seamlessly display your desired content, enhancing the visibility of key offers and driving engagement with your website visitors.

It’s a quick and easy way to personalize the header of your site, making it more dynamic and aligned with your current marketing strategies.

  • Flexible Content Display
    Allows you to display any type of content, including sales announcements, promotional banners, festive offers, or important notices, directly at the top of the website.
  • Customizable HTML/CSS
    Supports adding custom HTML and CSS for complete flexibility in design and styling. Customize the layout, colors, fonts, and other visual elements to match your website’s branding.
  • Easy to Integrate
    The module integrates seamlessly into your existing website with minimal technical expertise required. Just paste your custom code, and you’re all set to enhance your site’s functionality effortlessly.
  • Mobile-Friendly
    Ensures that the custom content displays beautifully on all devices, including desktops, tablets, and mobile phones, enhancing the user experience.
  • Multiple Content Types
    Supports a variety of content types, including text, images, videos, and links, allowing you to showcase your offers in different formats.
  • Seasonal Offer Management
    You can set and update seasonal offers or promotions easily, keeping the content dynamic and relevant throughout the year.
  • Easy Content Updates
    Simple user interface to modify or update the content in the header without requiring a developer. This makes it easy for you to keep the website fresh and up-to-date with new promotions or announcements.


Once you have downloaded the QloApps Custom code on Header Module from the store, you can easily install it by following these steps:

1. Log in to the back office of QloApps.

2. Go to the Modules and Services tab.

3. Click on Add a new module.

Add new module Image

4. Upload the ZIP file of the module.

5. Click on the “Choose File “ to select the zip file and the “Upload and install this module” option.

Upload module image
Install module after uploading zip file

After uploading the ZIP file the module will start installing automatically.

Once the module is installed, the user can see the prompt for successful installation and the module will be listed below. 

Once you have installed the QloApps Custom code on Header Module, you can easily configure its settings by following these steps:

  1. Navigate to the “Modules & Services” tab.
  2. Select “Manage Module” sub tab.
  3. Search for “Custom code on header”.
  4. Click on “Configure” to customize the module settings.
Click Configure button image

Custom code on Header Configuration Options

The Custom Code on Header field provides you with the ability to customize your website’s header section through CSS, JavaScript, or HTML code.

Simply enter your code into this field, and QloApps will automatically add it to your website’s header. This flexibility allows you to:

  • Style your website using CSS
  • Add interactive features with JavaScript
  • Insert custom HTML elements

Any code you add will be integrated directly into the header section, giving you full control over your site’s appearance and functionality.

After adding your custom code click save to save you code.

Add custom code for header

Note : Your custom code changes go live immediately upon saving. Review carefully for errors to avoid issues that could impact your website’s appearance or functionality.

If you are not able to save the complete custom code, then you need to follow the steps below to turn off the HTML purifier settings:

  1. Click on the preferences tab.
Go to preferences tab

2. In General Section, Set ” Use HTMLPurifier Library ” to No.

image-28

3. Save your settings and then attempt to save the custom code once more. This should resolve the issue and allow you to save the custom code successfully.

Note : Once you’ve saved the code, please set ‘Use HTMLPurifier Library’ to ‘Yes‘ again, as this is important for the proper functioning of other modules.

Upon saving your custom code, the added header will immediately appear on your website.

Frontend website showing Header

Keep your website’s content fresh and engaging by easily updating seasonal promotions and special offers.

Whether it’s holiday packages, summer deals, or limited-time discounts, you can modify promotional content instantly to reflect current seasons and special occasions.

This ensures your visitors always see relevant and timely offers when they visit your site.

Note: Your header will be visible on every page of the website.

Frontend showing header on Rooms page
Frontend image showing header on payment page

The QloApps Custom Code on Header module is a powerful tool designed to enhance your website’s functionality and engagement.

By enabling hoteliers to display customized content at the top of their site, this module provides a dynamic way to showcase promotions, announcements, and special offers.

With its flexibility, ease of integration, and support for various content types, the module empowers you to align your website’s header with your marketing strategies effortlessly.

Whether you’re promoting seasonal deals or sharing important notices, the QloApps Custom Code on Header module simplifies the process, keeping your website engaging and relevant throughout the year.

That’s all from the QloApps Custom Code on Header Module. I hope this guide has provided a clear understanding of how to manage your custome code.

For more information about QloApps, feel free to visit the official website: QloApps

Should you have any queries, issues, or additional requirements, don’t hesitate to share them on the QloApps Forum.

Current Product Version – V_1.0.0
Supported Framework Version – QloApps 1.6.x

. . .

Comment

Add Your Comment

Be the first to comment.

Start a Project




    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home
    Table of ContentHide Index