Customising the Mobile Information Bar

We know that the best user interfaces deliver the most appropriate content at the right time. This is especially true for visitors using mobiles.

Default Mobile Information Bar

Squarespace has an excellent Mobile Information Bar feature that when enabled, provides visitors with a pop-up shortcut bar along the bottom of their mobile screen. It helps them quickly go to four key areas of your website - your location, email address, phone number and business hours.

This Information Bar only appears on mobile, and it only appears when the user views the top of the page. If they didn't want to see the information on the bar, it automatically falls away as they scroll down the page, leaving the view of your mobile site unobstructed.

Can I book a restaurant?

Whilst developing a restaurant site, I wanted to provide a quick link for mobile visitors to book a table, in addition to the usual options to find the restaurant, check their opening hours or call them.

The Mobile Information Bar provides three of these, but there are no options to customise it. I couldn't simply replace the email icon with an option to book a table.

I decided to find a way of customising the bar with some javascript and some CSS. In the spirit of paying forward, I thought I'd share this technique with you. As you'll see, it wasn't too difficult and it could be used for other links like a Twitter button or a Facebook link. If you think of another use for it, post a comment below.

Step 1: Enable the Information Bar

On the Design menu, select Mobile Information Bar.

Drop-down menu of options

Enable the Mobile Info Bar. It doesn't matter whether you select Dark (white icons on a black background) or Light (black icons on a grey background), that's up to you. I've selected Dark.

At the top of the page you'll see a link that says:

The information displayed in the Mobile Info Bar must be added/edited via Settings > Business Information

Below this you'll see each of your business details - if you've entered them. If any are blank, click the link and go and enter them.

As we are going to hijack the Email button, you will need to enter an email address. If you don't want to provide this, you can add something generic like I have here:

Contact Email Address Box

Return to the Mobile Information Bar settings and tick each of the options. We're going to select Show Email but we're going to convert this so it can be used to book a table.

Save the changes.

Step 2: Add an Icon

The four icons used on the Mobile Information Bar are pre-configured. You'll need a new icon for your new option. I've chosen the dark theme and so for my Book a Table option, so I've created a small PNG image showing a plate and cutlery. There are many icon sites offering free icons where you are likely to find something suitable for your needs.

To load your icon image to the website, go to Design > Custom CSS.At the bottom (you may have to scroll down) click Manage Custom Files then click Add images or fonts.

icon show in Manage Custom Files

Add your image. Once loaded it will appear (in a list with other images or fonts you may have added to your site already).

Click the filename to discover the URL of the image file. When you click the filename, the image URL appears at the current cursor location in the Custom CSS window above. For example, this is how mine appears:

URL of my icon

You'll need this URL in a second for the CSS. Don't worry about the error, we'll remove this line in a moment.

Step 3: Add the CSS

Some CSS is needed to change the image in the information bar.

Whilst you still have the Custom CSS area open insert the CSS below, starting at line 1.

/* Change the Email icon in mobile information bar to plate icon */
.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-icon {
  background-image: url()!important;
}

Take the URL of your image and insert it into the ordinary brackets above. Don't forget to save your CSS!

Your CSS will then looks something like this:

/* Change the Email icon in mobile information bar to plate icon */
.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-icon {
  background-image: url(//static1.squarespace.com/static/573f135159827e68d0f8b018/t/57408d3607eaa04caaa22bea/1463848246956/plate-fork-icon.png)!important;
}

Don't worry if you don't have an icon yet, you can use my URL above for testing.

Take a look at your site on a mobile device. You should see the Mobile Information Bar and the first icon should now be your new image, not an email symbol. It will still say EMAIL though so we'll add some javascript to change that.

Step 4: Add the javascript

The javascript will change the text under the new image.

You'll add the javascript to the Page Header Code injection. You'll find this by navigating through the menus like this:

Settings > Advanced > Code Injection

This javascript relies on jQuery so if there's not already a line that gives the source of jQuery you'll need to add this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>

Next, add the javascript as follows:

<script>
$(window).bind("load", function() {
  $('.sqs-mobile-info-bar-trigger[data-type="contactEmail"] .sqs-mobile-info-bar-trigger-label').text('Book');
  $("a[href='mailto:xxx@test.com']").attr('href', '/book')
});
</script>

Before you save this, there are three elements you'll need to consider editing.

First, change the email address to match the email address that you entered in step 1. This is important or the code will not work. My example above shows the fictitious address of xxx@test.com that I entered in step 1.

Secondly, decide what you would like the title of the button to be. I choose "Book" to book a table. You can change it to something else, but keep it very short.

Lastly, you'll want to set the page that the visitor will be sent to when they click on this button. The URL of my table booking page is "/book".

Save your code.

Step 5: Admire your work

Your code should now work and the email option should be replaced with a customised option of your choice.

Modified Information Bar

If you have any comments or suggestions, please add them below.


Update

Many of you have asked how to customise the other buttons on the Mobile Information Bar.

The example that I used was replacing the EMAIL button, because this uses a link to an anchor tag. The CALL button is the same, so if you want to use this, you only need to substitute the data-type and the default link in the code above. The data-types for the buttons are:

contactEmail
contactPhoneNumber
location
businessHours

The CALL button uses href="tel:+0000000000" instead of href="mailto:xxx@test.com", where the telephone number is as you've entered it on your site.

The other buttons aren't so straightforward because the MAP button launches a link to Google Maps in a new window/tab, and the HOURS button simply displays a div on the same page, showing your opening hours.