1. Home
  2. Knowledge Base
  3. Touchless Menus
  4. Adding HTML Anchor Links to your Menu

Adding HTML Anchor Links to your Menu

This is a sample guide as to how you can add Anchor Tags to your Menu page to allow navigation on the page via links. This guide assumes your Menu has already been designed and the goal is to add navigation.

    1. Log into the dashboard.
    2. Go to Network> Hotspots click the blue Edit icon.
    3. Click View Splash Page to demo your page. Collect the URL of the page from your browser. Please contact support if you need help collecting your URL.
      EXAMPLE:https://splash.4wifi.net/hotspotlogin.php?res=notyet&nasid=EXAMPLE
    4. Go to Network> Splash Pages and click edit on your Menu page.
    5. Click on any content block and click on the page HTML button.
    6. Scroll to the top and paste the code below.
      <style>
            .menubutton1 {
              background-color: #1c87c9;
              border: none;
              color: white;
              padding: 12px 18px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 20px;
              margin: 4px 2px;
              cursor: pointer;
            }
          </style>
    7. Go to the content block where you would like to be able to click to and press the blue <> button to open the content block HTML editor.
    8. Locate specifically where in the content block you would like to link to and add the Anchor tag using the following as an example. You can use your own name, tag1 is just the example used.
      EXAMPLE:<a name="tag1">
    9. Press OK on the HTML editor.
    10. Go to the content block that you want the link on, press the blue <> button to open the content block HTML editor.
    11. Locate where in the content block you would like to place the link, and add a standard HTML link. Be sure to use the URL collected in step1 and the tag you used in step 4. EXAMPLE and tag1 are the values used in this guide.
      EXAMPLE:<a href="https://splash.4wifi.net/hotspotlogin.php?res=notyet&nasid=EXAMPLE#tag1" class="menubutton1">View Menu</a>

You can create multiple Anchor buttons to different parts of the page by adding additional tags and linking them in the URL of the button appropriately.

Updated on June 4, 2020

Was this article helpful?

Related Articles