Web banner placement guidelines

Table of Contents

Correct placement of Burohelp web banners on your website is essential for maximizing visibility and engagement. This guide provides essential recommendations for placing these banners effectively based on the layout and content of your pages.

General placement tips for Burohelp web banners

1. Homepage

Include banners near topics that people will need help with, such as documentation, appointments, or other services.
Homepage grid
Grid layout

If you have a grid of items with links, use a medium banner within the grid.

Homepage billboard
Horizontal section layout

Place a large billboard banner above the fold of the homepage for maximum visibility.

2. Content pages and support pages

Including Burohelp banners on content pages ensures that users receive assistance precisely when they are reading about relevant topics.

Content blocks
Side layout banners

If your layout has two columns, add the halfpage banner as a side banner for continuous visibility.

Content blocks 2
Within content blocks

Place medium / horizontal / square banners within content blocks or near the top of articles.

3. Contact pages

Contact and support pages are critical touchpoints where users seek help and information. By placing Burohelp banners in sidebars or headers on these pages, you can offer immediate access to support services, improving user satisfaction.

Contact

Side by side

Place half page / square / medium banners in sidebars to ensure they are users can easily seen.

Support (1)

Above the form

Position large billboard banners above the contact information to provide immediate assistance options as soon as users land on the page.

How to add Burohelp web banners to your website

Step-by-Step Instructions

  1. Choose the Banner Size
    Select the appropriate banner size for the placement location on your website (e.g., Leaderboard, Medium Rectangle, Wide Skyscraper, Full Banner).
  2. Get the Banner Code
    Obtain the HTML or JavaScript code for the Burohelp banner you want to add. This code is in the organisation portal of Burohelp at Touchpoints
  3. Insert the Code
    Follow the instructions below to add the banner code to your website.
  1. Open the HTML File:
    • Use an HTML editor or a plain text editor to open the HTML file of the page where you want to add the banner.
  2. Locate the Desired Location:
    • Scroll through the HTML code to find the section where you want to place the banner (e.g., within the <div>, <header>, <footer>, or <aside> tags).
  3. Paste the Banner Code:
    • Copy the provided HTML or JavaScript banner code.
    • Paste the banner code into the desired location within the HTML structure.
  4. Save and Upload:
    • Save the changes to your HTML file.
    • Upload the updated HTML file to your web server using FTP or your web hosting service's file manager.
  5. Preview the Page:
    • Open your web browser and navigate to the updated page to ensure the banner appears correctly.

 

  1. Log in to WordPress Admin:
    • Navigate to your WordPress admin dashboard.
  2. Go to Widgets:
    • From the sidebar, go to Appearance > Widgets.
  3. Add a Text Widget:
    • Drag and drop a Text widget to the desired widget area (e.g., Sidebar, Footer).
  4. Insert Banner Code:
    • Paste the HTML or JavaScript banner code into the text widget.
  5. Save:
    • Click Save and then check your site to ensure the banner appears correctly.

Log in to HubSpot:

  • Navigate to your HubSpot account dashboard.

Navigate to Website Pages or Landing Pages:

  • Go to Marketing > Website > Website Pages or Landing Pages.

Edit the Page:

  • Select the page you want to edit.

Add a Custom HTML Module:

  • Click on the section where you want to add the banner and select Add module > Custom HTML.

Insert Banner Code:

  • Paste the HTML or JavaScript banner code into the custom HTML module.

Save and Publish:

  • Save your changes and publish the page. Check to ensure the banner is displayed correctly.

Log in to Wix:

  • Navigate to your Wix account dashboard.

Edit Site:

  • Click on Edit Site.

Add HTML iFrame:

  • Click Add > More > HTML iFrame.

Insert Banner Code:

  • Paste the HTML or JavaScript banner code into the HTML iFrame box.

Place iFrame:

  • Drag and position the iFrame to the desired location on your site.

Save and Publish:

  • Save and publish your site. Check the placement of the banner.

Log in to Squarespace:

  • Navigate to your Squarespace account dashboard.

Edit Page:

  • Select the page you want to edit.

Add Code Block:

  • Click Add Block > Code.

Insert Banner Code:

  • Paste the HTML or JavaScript banner code into the Code block.

Save and Publish:

  • Save your changes and publish the page. Ensure the banner appears correctly.
  1. Log in to Drupal:
    • Navigate to your Drupal admin dashboard.
  2. Go to Structure:
    • Navigate to Structure > Block layout.
  3. Add Custom Block:
    • Click Add custom block.
  4. Insert Banner Code:
    • Paste the HTML or JavaScript banner code into the custom block.
  5. Assign Block to Region:
    • Assign the custom block to a region (e.g., Sidebar, Footer).
  6. Save and Configure:
    • Save the block and configure the visibility settings if needed. Check the site to ensure the banner is displayed correctly.