Adding links

Links are used on websites to link to content. In Optimizely CMS, the following link types are available by default.

  • 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. Links to create an email message with the linked email address entered.
  • External. Links to content on other websites or media on file shares.
  • Anchor. Links to sections within a page, allowing readers to jump between topics on a page.

You can also use shortcuts, a specific type of link used for navigation and reusing existing website information. See All properties editing view.

You can create a link in the rich-text editor through drag and drop (pages and media files), or by selecting text and clicking the Insert/edit link button in the toolbar, which displays the Create link dialog box.

Image: Create Link dialog box

  • Link title displays as descriptive text for the link, such as on mouse-over.
  • Open in lets you display the link in a new window, often used for links to external sources.
  • Language lets you link to a specific language version for content. Automatic directs visitors to the detected browsing language version.

Overview of creating different types of links:

Create link: How to: Detailed info, see:
to page in CMS Drag and drop from page tree.
or
From Create link dialog box, select Page or External link.
Linking to a page on the same website
to page on another website From Create link dialog box, select External link. Linking to a page on an external website
to file in CMS Drag and drop from Media folder.
or
From Create link dialog box, select Media.
Linking to files in Media
to file on file server or another website From Create link dialog box, select External link. Linking to files on a file server or an external website
to email address From Create link dialog box, select E-mail. Linking to an email address
to specific location on a page (anchor link) Insert anchor from toolbar, and then from Create link dialog box, select Anchor. Creating anchor links
from image From Create link dialog box, select any of the Page, Media, E-mail or External link option. Linking from an image

Linking to a page on the same website

You can 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).
  • Or, select the text where you want the link in the rich-text editor, and click Insert/edit link. In the Create link dialog box, you can select the Page option and browse to a page to link to, or select the External link option and paste a web address (URL Stands for "Uniform Resource Locator". Also known as a web address such as http://world.optimizely.com.) to a page on your website. If you choose the External link option, Optimizely automatically converts the link to an internal link.

Remaining URL

The Remaining URL field is used 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. A typical URL containing a query string can look like this: https://www.alloyexamplesite.com/Search/?searchQuery=reseller. The query string parameters (in bold) following the URL open the search results for "reseller".

To create an internal link containing query string parameters, create the link in the Create link dialog using the External link option and pasting the entire web address with the query strings parameters or using the Page option. In that case, browse to the page and then add the query string parameters under Remaining URL.

Image: Example of query strings parameters added to internal link

Linking to a page on an external website

Select the text where you want the link in the rich-text editor, click Insert/edit link, and use the External link option to enter the web address to the website to link to, such as https://www.alloyexamplesite.com.

If you create an external link to a page found on the website you are working on, for example, by copying and pasting a URL from the website, Optimizely recognizes this and automatically converts it to an internal link. If the link contains query strings parameters, the query string parameters can be edited in the Remaining Url option. See Linking to a page on the same website.

Linking to files in Media

You can create links to media in the Media folder in two ways:

  • Place the cursor in the rich-text editor where you want the link, and drag the desired file (PDF, Word and so on) from a Media folder into the location. The filename becomes the link name (which you can edit, if needed).
  • Select the text where you want the link in the rich-text editor, click Insert/edit link and use the Media option to select a media file to link to.

You can create a link to any type of document, but the behavior when a website visitor clicks the link depends on the file format and the settings of the visitor's computer.

Linking to files on a file server or an external website

Select the text where you want the link in the rich-text editor, click Insert/edit link and use the External link option to add the path or URL to the file to link to. For a file server, enter the complete path including the computer name, and the filename with file extension. The file storage network location must be properly accessible for this to work. Valid external prefixes are http, https, ftp and file.

Linking to an email address

Select the text where you want the link in the rich-text editor, click Insert/edit link and use the email option to enter the email address to link to. When you click the link, the default email client opens with the email address entered in the address field of the email.

Linking from an image

Select the image in the rich-text editor, click Insert/edit link and add a link using any of the Page, Media, External link or Email options.

When you add an anchor, first create the anchor and then add the link to it from the Create link dialog box.

  1. Place the cursor in the text in the rich-text editor where you want to place the anchor.
  2. Click Insert > Anchor on the editor toolbar and enter a name for the anchor. Do not use special characters or spaces.

    Image: Anchor dialog box

  3. Select the text in the rich-text editor where you want the link to the anchor.
  4. Click Insert/edit link and use the Anchor option to select the anchor to link to.

    Image: Create link dialog box

Link properties

The following examples show common implementations of link functionality on websites, with functionality similar to what is described for the link dialog box above.

When you add images to content areas intended for images or blocks and so on, instead of adding the image in the rich-text editor, you can use an image link property which lets you select an image from a folder in Media, automatically placing it properly in the content area. See Adding and editing images.

Link collection

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

Image: Link collection example

You can create links by dropping pages or media files in the link collection area, or by creating links through the link dialog box. You can create links for pages, media files, external sources and email addresses. You can move links to change the order in which they appear.

Image: Edit link collection

You can also edit the displayed name of the link.

Image: Edit displayed link name

 Linking to catalog entries

If you have Optimizely Commerce installed, the link dialog box contains an option to select items from the product catalog when you create links. See Manage content in the Optimizely Commerce section of this user guide.