How do I add links to widgets?

Summary

  • All widgets allow you to add/feature at least one link
  • Some image-based widgets (Hero widget, Image widget) allow you to add an optional link to make the image clickable. With other image-based widgets (Photo Thumbnail, Thumbnail List), adding a link is required.
  • The Add Links widget allows you to feature a list of links
  • Many widgets allow you to add a link to the title of the widget


Widgets, such as the Promo with Image widget, allow you to easily feature links.

Best Practices

Whenever there is an option to add a link within a widget, there is a "Find Link" button that will easily allow you to add both internal and external links (similar to how you add links to other content items, like Content pages).

You can use the "Find Link" button to either search for an internal page, or copy and paste an external link (and link to attachments, anchor links, etc.). For widgets with a "title" field, after you add a title, you can check "Make title a link" to make the "Find Link" button appear.

It is highly encouraged to use the "Find Link" if you are adding a link within a widget, especially when you're adding internal links. Using the "Find Link" button will ensure that these links are added correctly. If you try to add an internal link manually, you will need to make sure it's a "relative link" (where you only plug in everything AFTER the .berkeley.edu/), which is more difficult. Any minor typo will break the link, and if the link path gets updated in the future, the relative link that you added manually may not update correctly. 

Instructions

When configuring your widget, navigate to the "Find Link" button and add in your link accordingly. For example, when adding/configuring a Promo widget, select your color and add your text, then navigate to the "Find Link" button if you would like to add a link (links are optional for Promo widgets):

Then, once the "Linkit" dialog window pops up, either search for the internal page or attachment that you'd like to link to (for an internal link) in the "Search for content" field, or copy and paste an external link in the "Link URL" field (for an external link). In this same Promo widget example, copying and pasting the news.berkeley.edu URL will link the Promo widget to the Berkeley News website.

The following Promo widget now links to the Berkeley News website: