Dev GuideAPI ReferenceUser Guide
HomeDev GuideRecipesAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
GitHubNuGetDev CommunityOptimizely AcademySubmit a ticket

Add links

Learn to add various link types and shortcuts in Optimizely CMS 13. Link to pages, media, emails, external sites, and anchors, or manage link collections.

Links connect readers to related content across your website and external sources. The following link types are available by default in Optimizely Content Management System (CMS 13):

  • Page – Links from one page to another on the same website.
  • Media – Links to images, documents, and other media files stored on the web server.
  • Email – Creates an email message with the linked email address.
  • External – Links to content on other websites or media on file shares.
  • Anchor – Links to sections within a page, letting readers jump between topics on a page. Also known as bookmarks in other applications.

Shortcuts are a specific type of link used for navigation and reusing existing website information. 

Create a link

Create a link through drag and drop (pages and media files), or by selecting text and clicking Insert/edit link in the rich-text editor toolbar. When you drag and drop a page or media file into a valid element, Visual Builder creates the link automatically. Edit the link the same way you insert a link in the rich-text editor by clicking Insert/edit link.

Screenshot of the rich-text editor toolbar with the Insert/edit link button highlighted where editors create a link

The Create Link window displays.

Screenshot of the Create Link window with Link title, Open in, and Language fields where editors configure link properties
  • Link title – Displays as descriptive text for the link on hover.
  • Open in – Displays the link in a new window, often for links to external sources.
  • Language – Links to a specific language version for content. Automatic directs visitors to the detected browsing language version.

Select one of the following link types:

Link to page on the same website

Create internal links in two ways:

  • Place the cursor in the rich-text editor where you want the link, and drag the desired page from the page tree into the location. The page name becomes the link name (which you can edit if needed).

    Screenshot of the rich-text editor where editors drag a page from the page tree to create an internal link

  • Select the text where you want the link in the rich-text editor, and click Insert/edit link. In the Create link window, complete the Link title, Open in, and Language fields, and then select the Page option and select the page to link to.

    Screenshot of the Create Link window with the Page option selected where editors choose a page to link to

Remaining URL

Use the Remaining URL field to add or edit query string parameters. A query string is a dynamic part of a link and is not related to the website structure. It can be data from a logged-in user, data from a form submission, search result data, and so on. For example:

  • Site URL with query string – https://www.alloyexamplesite.com/Search/?searchQuery=reseller
  • Query string – ?searchQuery=reseller

In this example, the query string parameters following the URL open the search results for "reseller".

Screenshot of the Create Link window with the Remaining URL field where editors add query string parameters to a link

Link to media files on your site

Create links to media in two ways:

  • Place the cursor in the rich-text editor where you want the link, and drag the desired media file (PDF, Word, and so on) from the Media tab of the assets pane into the location. The filename becomes the link name (which you can edit if needed).

    Screenshot of the rich-text editor where editors drag a media file from the Media tab to create a media link

  • Select the text where you want the link in the rich-text editor, and click Insert/edit link. In the Create link window, complete the Link title, Open in, and Language fields, and then select the Media option and select the media to link to.

    Screenshot of the Create Link window with the Media option selected where editors choose a media file to link to
📘

Note

Create a link to any type of document. The behavior when a visitor clicks the link depends on the file format and the settings of the visitor's computer.

Link to an email address

  1. Select the text where you want the link in the rich-text editor.

  2. Click Insert/edit link.

  3. Complete the Link title, Open in, and Language fields.

  4. Select the Email option and enter the email address to link to.

    Screenshot of the Create Link window with the Email option selected where editors enter an email address

  5. Click OK. When a user clicks the link, their default email client opens with the email address entered in the email address field.

Link to files on a file server or page on an external website

  1. Select the text where you want the link in the rich-text editor.

  2. Click Insert/edit link.

  3. Complete the Link title, Open in, and Language fields.

  4. Select the External link option and enter the external link to link to.

    Screenshot of the Create Link window with the External link option selected where editors enter an external URL

  5. Click OK.

For a file server, enter the complete path, including the computer name and the filename with the file extension. The file storage network location must be properly accessible for this to work. Valid external prefixes are http, https, ftp, and file.

If you create an external link to a page found on the website you are working on, Optimizely recognizes this and automatically converts it to an internal link. If the link contains query string parameters, you can edit the query string parameters in the remaining URL.

Create anchor links

An anchor link is a link to a specific location on a page.

  1. Insert an anchor from the rich-text toolbar in the location where you want to link to. Do not use special characters or spaces in the anchor name.

    Screenshot of the rich-text editor toolbar with the Anchor button where editors insert an anchor at a specific location

  2. Select the text where you want to link from in the rich-text editor.

  3. Click Insert/edit link.

  4. Complete the Link title, Open in, and Language fields.

  5. Select the Anchor option and select the anchor you created.

    Screenshot of the Create Link window with the Anchor option selected where editors choose an anchor to link to

  6. Click OK.

Link properties

The following examples show common implementations of link functionality on websites, with functionality similar to the link window described in the previous section.

Image link

When you add images to content areas intended for images or blocks, use an image link property to select an image from a folder in your site's media. The image link property places the image in the content area automatically. See Add and edit images.

Link collection

A link collection is a property where you can manage a group of links.

Screenshot of a link collection property with multiple links where editors manage a group of links

On the Content tab of the All Properties view, create links and other content by dropping pages or media files in the AdditionalData area, or by creating links through the link window. Create links for pages, media files, external sources, and email addresses. Move links to change their display order. Edit the displayed name of the link as needed.

Screenshot of the All Properties Content tab with the AdditionalData area where editors create and manage links in a link collection

Link to Commerce Connect catalog entries

If Optimizely Commerce Connect is installed, the link window contains an option to select items from the product catalog when you create links. See Manage content in the Optimizely Commerce Connect documentation.

Updated 10 days ago