CSV - Banner Connect

Setup

Basic Setup

• Drop the widget into Muse Design mode. Place the widget where you would like the banner to appear.
• Size the widget container to the appropriate size. If you are using spcifically sized ads, you will want to size the widget container to match the image size in your spreadsheet. More on this below.
• Select a Content 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 link 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 template spreadsheets cannot be directly edited. Make a copy: File > Make a copy.
• Name your copy.
• Publish the copy: File > Publish to the web. Make sure to publish the documents as a .CSV file.
• In the publish window, grab the Google spreadsheet URL and paste into the Google Sheets URL field in the widget option panel in Muse.
• Your spreadsheet is 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 banners.

CSV File Setup

To link a CSV file to the Banner Connect widget, simply click "Add File" next to the CSV File field in the widget options. You may edit the CSV file that is included in the widget .zip file.

Widget Options

Content Source, Google Sheets URL and CSV File are explained above. We will take a look at the remaining options below.

• Image Size: This option tells the widget how to handle images.
  • Original: This option passes the original image size and dimension unaffected.
  • Cover: This option allows the image to fill the space of the widget container. This mode will allow the entire widget container to be filled by the image, though may result in cropping if the page is resized.
• If you are using the widget to display banner ads, keep in mind that there are industry standards for ad sizes. There are many resources for imformation on this, that discuss the performance of ads, based on size. Here's one resource: https://www.creatopy.com/blog/banner-standard-sizes/

• If you have received a specifically sized image, it may be best to use the Original option. This will ensure that the image will be displayed at the intended size.
• Size the widget container to match the size of the image.

You may apply responsive resizing to the Banner Connect widget, but keep in mind that the image dimensions may change when the browser is viewed in small sizes

• Random Order: This toggle allows the widget to display the banners in a random order. With this option turned off, the widget will display images in the order they are listed in the spreadsheet. Keep in mind that banners update when the page is refreshed, unless Autoplay is enabled (more on this below).
• Enable Autoplay: This setting cycles through all of the banners in your spreadsheet, without a page refresh. This mode converts the widget into a slideshow-type display.
• Transition Delay: Sets the time that each banner will be displayed before transitioning.
• Transition Type: This option offers a few transition styles such as slide and fade.
• Transition Speed: This sets the time it takes for each transition to complete.
• Container Styling Section: The Container Styling Section contains several styling options specific to the banner container. These settings apply to things like background color, stroke, etc. The settings are self-exaplanatory and will not be covered here in detail.

Content Spreadsheet

The content spreadsheet contains all of the key settings for the banner content. The columns in the spreaadsheet are labeled with their function, and will not be discussed here individually. However, there are several unique tips that will be discussed below.

Link: https://docs.google.com/spreadsheets/d/1Mryz9bxM-3EIQ72uZUySLewEecbvVmMg5urQbdB4N2A/edit?usp=sharing

• Image: Enter your image links in the Image column. Please note that images must be hosted on the web. You may use any host you like, such as Dropbox, Google Drive, Flickr, etc. When acquiring your image URL, be sure that it is a direct link. You can test this by pasting the link in a browser address bar and going to the link address. You should see nothing but the image. You may need to modify the URL in order to make it a direct link.

If you wish to host your own images, you may drop them on a hidden page on your site. Once published, you can acquire the image link by right-clicking the image on the published page.

• Colors: All color settings in the spreadsheet can be entered as hex value, RGB value, or by simply entering the color name (such as red, blue, etc.)
• Fonts: As with all widgets, you must ensure that when entering a font in the spreadsheet, that you use the correct CSS font name. You can find this by inspecting your page in the browser. Also, for any font to be exported properly, it must be used elsewhere on the page. If necessary, you can publish a font by simply adding a couple characters anywhere on the page. These can be made the same color as the page background if you wish to hide them.
• Lastly, do not change the structure or names of the spreadheet columns or rows.

If you experience any intermittent issues with the banner 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 Banner Connect. Go to File > Publish to the web...
• Click the "Web Page" dropdown and select comma-separated values (.csv).
• Click “Publish".
• Copy the link shown in the Publish To Web pop-up.
• Paste this link into the Widget option panel in Muse.

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
• 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.

Known Issues/Conflicts

No known issues or conflicts

Additional Info Links

• Forum Link: http://forum.musethemes.com/forums/connect-csv-widgets.30/
• Update Log: http://www.muse-themes.com/pages/release-log.html