Hero Connect is a unique widget, providing users new and previously unavailable finely-tuned control of hero images. Use it to show images and headlines that are displayed specifically based on time of day, day of the week, and more.
Hero Connect allows users to connect to their site visitors in smart and effective ways. Take advantage of your analytics data by showing targeted audience-specific content at just the right moment.
As part of our Connect series of widgets, Hero Connect also allows you to update all of the important content (such as image selection & headline text) remotely via Google Sheets. You can also provide spreadsheet access to clients who want to stay engaged with their sites and update hero content regularly.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Initial Release
Drop the widget into Muse Design mode. Place the widget where you would like the Hero to appear.
Size the widget container to match the appropriate size. For full width use, select the "Stretch to Browser Width" option in the resize menu. For full screen use, select "Full Page" in the Display Mode dropdown in the Setup section of the widgt option panel. The full page option will always load full page, regardless of the screen size or shape, similarly to our SuperHero widget.
The widget may be previewed immediately. The default images and text will be seen.
Select a CSV Source:
Google Spreadsheet - Allows for linking to spreadsheets in the Google Sheets app. This is our suggestion in most all cases since it allows for instant updates without having to open Muse.
Local CSV File - This option uses local CSV files uploaded from your computer. This option may be best if you are given hero content in .CSV file format. Requires opening your Muse project.
Google Sheets Setup –
Detailed instructions for working with Google spreadsheets can be found in the "Editing the web-based Google Spreadsheet templates" below.
Open the Google spreadsheet template links found in the bottom of the widget option panel.
If you are not already signed into your Google account, do that before proceeding.
The content and presets sample spreadsheets cannot be directly edited. Make a copy of each: File > Make a copy.
Name your copies.
Publish the copies: File > Publish to the web. Make sure to publish the documents as .CSV files.
Grab the Google spreadsheet keys and paste into the content and presets spreadsheet key fields in the widget option panel in Muse.
Your spreadsheets are now linked to the widget, and may be previewed in browser if you wish. If no edits have been made, you will see the sample hero images and text.
Display Types –
There are several display types for hero images. To select a display type, open the presets spreadsheet, and use the dropdown in row 3 to select a display type. The presets spreadsheet will be discussed in detail later. Aside from the "Static" option, they are all time-based:
Static: This display type will be used rarely, since it isn't dynamic. Though if you or your client ever decided to stop the rotation of images temporarily, this selection can be used.
Random: This mode cycle through rows in the spreadsheet randomly. Whatever caption text is in a row with an image will be displayed.
Hourly: This setting ties to the mt_hero_hourly column in the content spreadsheet. The hours match to the hours in a day, starting with 0 at midnight. So 1 would be 1am, 12 would be 12 noon, and 23 would be 11pm. When using this mode, it's best to put in all the hours of a day, 0-23. If you want images to cover several hours at a time, repeat them in the rows.
Daily: This ties to the mt_hero_daily column. Whatever day of the week is listed will match up with the image you link to it later in the row.
Part Of Day: This mode uses pre-defined blocks of time: dawn, morning, afternoon, and night. Select from the dropdown.
TimeInterval: This one is a little bit different than the others in that it is controlled in the Presets sheet instead of the Content sheet. You just set the dropdown to timeInterval, then you set the number of minutes in the timeRange setting two rows down. This setting works like the Hourly setting. It will just cycle through the images, based on the interval set. The interval is in minutes. Note that when changing time interval, you will have to go through a couple additional steps: set the ResetTimeRange parameter to 1, refresh the site, then change the ResetTimeRange parameter to 0.
Content Spreadsheet –
The content spreadsheet contains all of the image, video and text information, as well as the settings for the display types.
mt_hero_mediaType: Choose between images and video via the dropdown.
mt_hero_media: This column allows image or video links. Note: It's important to note that the URL generally needs to end in the file type (like .jpg or .png for images or .mp4 or .mov for video) in order to work. We made a video discussing hosting options for images and video. Find it in the video playlist for Gallery Connect.
mt_hero_title: The text in the main title.
mt_hero_desc: The Description / subtitle text.
mt_hero_ctaButtonText: The button text (the button itself is enabled/disabled in the Presets spreadsheet).
mt_hero_ctaButtonlink: Where the button links to (there is a setting to open the link in the same page or a new tab in the Presets sheet)
Presets Spreadsheet –
The presets spreadsheet offers styling options for the captions and button. Additionally, there are options related to the timing-based display types. We won't cover the styling controls in detail, though we will cover the key settings in the Timed Display Settings section:
displayType: Sets the display type, as described above.
staticIteId: This is the unique ID you will give the image if you're using a static image (rare).
timeRange: This is the time interval used in the timeInterval display type. Set In minutes.
resetTimeRange: Use this parameter in conjunction with the TimeRange parameter. When changing the TimeRange parameter, set the ResetTimeRange parameter to 1, refresh the site, then change the ResetTimeRange parameter to 0.
Widget Option Panel –
Like the other Connect widgets, the widget option panels are rather simple since the majority of settings are found in the presets sheet. Some key options can be found in the Setup section:
Preloader Type: A preloader is displayed on the page while the hero is loading. The Preloader Type setting offers several preloader types. Some preloader options allow for both preloader and preloader background colors, which can be set below.
Local Storage: This setting is offered to aid the designer during setup and testing. Since web browsers cache data as you preview the widget, it can be difficult to see changes as they're made with caching on. We've built in a local storage system that can be enabled, disabled, or set to a custom refresh interval. Our strong suggestion is to use the "Do Not Store" setting while you're setting up the widget. When your hero editing is complete, change this setting to "Permanent".
If you experience any intermittent issues with the hero content loading, or "script" errors, clearing your browser's cache should help
Editing the web-based Google Spreadsheet templates
You will need a Google account and access to the free Sheets web app in order to edit the template (no Google account is required for viewing the template).
Follow the link in the bottom of the widget panel to open the templates.
The template is view-only and cannot be edited as-is. Make a copy of the template: File > Make A Copy.
Name the new copy.
The new copy can now be edited.
When ready, you will need to publish the spreadsheet in order to use it with Sidebar Menu. Go to File > Publish to the web...
Click the "Web Page" dropdown and select comma-separated values (.csv).
Copy the long set of random characters in the browser's URL field, or in the link shown in the Publish To Web pop-up.
Paste this Google Spreadsheet Key into the Widget option panel in Muse (you will need keys for both the Content and the Presets spreadsheets).
Tips for editing CSV files
Once you've published your Google Spreadsheet, ANY change made to the spreadsheet will be updated on your website. This is handy and quick, though you will want to be careful to make sure that your changes are exactly what you want.
The data within the CSV must be entered carefully:
Spaces are not supported in most entries
Be careful if you're cutting and pasting (be sure not to include extra characters or spaces)
Do not create empty rows
In the Presets Spreadsheets, the only fields that need to be updated are the cells in the "option_value" column. Values in this column may be numbers or letter text. For basic enable/disable options, 1=enable, 0=disabled. We've built in dropdowns wherever possible for common variables.
Check your progress often while editing CSV files. Small errors such as spaces or typos can make it so that your sidebar menu does not appear. If you’re working with a local file, save and load the file into the widget, then publish to check for functionality. If you’re working in Google Sheets, simply preview your sidebar and refresh the browser to see ongoing updates. If you do have an issue, use the “undo” function in your spreadsheet editor to back up to a point where the widget was working.
Commonly Asked Questions
What is a .csv file?
A .csv file is a basic spreadsheet file that can be edited in Excel, Numbers, Google Sheets, or similar.
Should I use the web-based template, or the local file? What's the difference?
Ultimately, there's no difference in the functionality of the sidebar menu, whether you use the web template or the local template. Local files allow for traditional editing and backup in your favorite spreadsheet editor. The web template option allows for immediate remote updates for you or your client.