Links

Links are any textual, visual, or in some cases, email element in HTML. In the ProProfs Knowledge Base editor, you can insert links to an internal/external URL to add a reference to your knowledge base articles. You can even add an email address as a link to invite user feedback & queries via email.

This article shows a step-by-step procedure for adding links to other pages.

Benefits of adding links:

• Simplifies navigation to related articles

• Redirects users to the relevant information

• Boosts help pages' search visibility

Here's how various link types can improve page navigation.

Link to an external URL

Anchor Link

Link as an email

This article covers the following:

• Link Dialog Box Overview
  • Link Info
  • Link Type- URL
  • Link Type- Emails
  • Link Type- Link to anchor in the text
  • Link Type > Add an external link using HTML
• Advanced Tab
• Removing a Link

Link Dialog Box Overview

To insert a link into your page, press the "" icon on the toolbar or use the Ctrl+L keyboard shortcut. 

If you want the link to be assigned to a specific text, select that text first. The link URL or email address will appear as is on the page if no text is picked.

The Link dialog box contains two sections: Link info and the Advanced section. Let’s see how these options work:

 Link Info

The Link Info tab is the default tab that opens after you click the button on the toolbar in which you have:

1. Link Type: It allows you to choose one of the following options:

• URL – the web address of anything available on the Internet, such as a website, a PDF document, or an image. For example, you can use "http://example.com/about.html" or "http://example.com/image1.jpg" as the URL.

• Link to anchor in the page – an internal link to a designated point on your page. For example, you can use #anchor1 to anchor text.

• Email – Use an email address as a link. For example, use myname@example.com to link email.

2. Protocol – This is the communication protocol used with the web address. You can choose one of the following options: http://, https://, ftp://, news://, or . to use in the protocol.

3. URL – This is the website address for the external resource to which the link will redirect users. For example, you can use the URLs: "http://example.com/about.html" or "http://example.com/image1.jpg".

4. Browser Server - You can also browse the server to select an image or file. If you upload a file using the file manager, you can add a link on a page to download the file.

5. Link to Page - This will open an overlay to link to another page.

 Link URL

In your ProProfs Knowledge Base page editor,

Step 1: Select the text and click “” in the toolbar.

• Select the link type as “URL,” enter the link and click OK.

How to set the targeting options

After adding the URL, you need to set the Target options. Switch to the Target tab, select the target option and click OK to save the changes.

Here is a brief description of how these target options work:

1. <not set>: Opens the link in the same tab.

2. <frame>: Opens the link in the named iframe.

3. <popup window>: Opens the link in the popup window.

4. New Window: Opens the link in the new tab.

5. Topmost Window: Opens the link in the entire body of the window.

6. Same Window: Opens the link in the same window or frame.

7. Parent Window: Opens the link in the parent frame.

Link Type > Email

This feature allows you to insert a clickable email address, subject, and body of the email message to your pages when you click the link.

The Link Info tab contains the following fields that let you configure the recipient and the message content:

• Email Address – This is the address of the recipient of the email message. This field is required for the email link to work.

• Message Subject – This is the default text in the email message's subject line.

• Message Body – This is the default text in the email message as its content.

Link Type > Link to anchor in the text

To use anchor links, you will need to insert anchors in the page. To insert an anchor, press the button on the toolbar. The following Anchor Properties window will appear:

In order to create an anchor, enter its name in the Anchor Name text box. Once you click OK, the icon will appear on the page.

To remove an anchor, select it and press Delete.
 

The Link Info tab allows you to point to an anchor previously set on the page. This tab contains the following options that make selecting an anchor an easy task:

• By Anchor Name – This is a drop-down list containing the names of all anchors established on the page.

• By Element Id – This is a drop-down list containing the identifiers of all anchors established on the page with the ID attribute.

If you do not have any anchors defined on your page, a message telling you so will be displayed in the Link Info tab.

Here is how you can use Anchor Links

Step 1: Open the ProProfs Knowledge Base page editor.

Step 2: Select the text and click

Step 3: Select the link type as “Link to anchor in the text,” Anchor name, and Element ID. Click OK.

The anchor tag in the URL would be in the format: URL$AnchorName

Here is what the URL with an anchor tag would look like - http://instruction.helpdocsonline.com/unique-features$editor

In the above example,

• URL is “http://instruction.helpdocsonline.com/unique-features$editor”

• AnchorName is “editor.”

Link Type > Add an external link using HTML 

ProProfs Knowledge Base editor also allows you to use HTML code to insert links in the text.

Step 1: Open the page editor and click the “view source” button.

Step 2: Replace the text with an anchor link and anchor text with the following HTML tag:

Step 3: Save the changes.

Link to Download a File

First, you have to upload the file to your library. After you have uploaded it, you can insert a hyperlink that will download that file. 

Step 1: Open the ProProfs Knowledge Base page editor.

Step 2: Select the text and click .

Step 3: Click Browser Server

Step 4: Select the file to download.

Step 5: Click OK to save the changes. A hyperlink will appear on the selected text.

Advanced

The Advanced tab lets you configure additional link options, such as assigning an ID, a class, a tab index, a tooltip, or CSS-style properties. It is meant for advanced users with knowledge of HTML and CSS.

Here is a brief description of Advanced tab elements:

• Id – A unique identifier for the link element in the page (id attribute).

• Language Direction – The direction of the text: Left to Right (LTR) or Right to Left (RTL) (dir attribute).

• Access key – A keyboard shortcut to access the link element (access key attribute).

• Name – The name of the link element (name attribute).

• Language Code – The language of the link element is specified according to RFC 1766 (lang attribute).

• Tab Index – The tab order of the link element (tab index attribute).

• Advisory Title – The tooltip text appears when the mouse cursor hovers over the link (title attribute).

• Advisory Content Type – The content type of the link (type attribute).

• Stylesheet Classes – The class of the link element (class attribute). Note that a link element might be assigned to more than one class. If this is the case, separate class names with spaces. Learn more about CSS properties.

• Linked Resource Charset – The character set of the linked resource (charset attribute).

• Relationship – The relationship between the current page and the link target (rel attribute).

• Style – CSS style definitions (style attribute). Note that each value must end with a semi-colon, and individual properties should be separated with spaces. Learn more about CSS properties.

Removing a Link

Step 1: Open the ProProfs Knowledge Base page editor.

Step 2: Select the link and click the unlink button in the toolbar. Save the changes.

Step 3: Click Preview to see the changes.

That is all about adding links in the ProProfs Knowledge Base editor.