Category: Plugins

12 Best Examples of Product Documentation and Help Guides

Karishma Sibal Leave a comment

Besides a good feature rich product and amazing support; Product Documentation also plays an important role in terms of customer satisfaction and revenue. If there is no documentation available on the product site, customers will be forced to raise a support ticket.

Getting response from the support team may take some time and it may delay customer’s work. Self help guides allow customers to go through frequently asked questions and general queries and help them resolve small issues by their own. A good documentation contains easy navigation and clean layout with better readability. Step by step explanation with screenshots helps too. In this article, I will showcase some user manual examples or product documentation example to help you set a good goal.

Get Inspiration from User Manual Examples

If you are thinking that, creating a product documentation or online user manual is a very technical thing, I would recommend to read this Ultimate Guide to Create Product Documentation. A good documentation will speed up your product’s sale as well as improves SEO too.

Checklist for a Good Product Documentation Example

  • Easy navigation with clean UI
  • SEO Friendly design
  • Visitor’s Feedback with Comment
  • Code Syntax Highlighter
  • PDF Support with Branding for offline reading
  • Easy edit of documentation with in-built text-editor

Great Examples of  perfect Product Documentation and Help Guides:

Before creating a good product documentation guide, it is always better to see some inspirations. I have listed some of the best user manuals and product guide examples in this article to inspire you enough to start making your own. Many of these examples are of popular product sites and you may think that building such documentation will be a costly and time consuming task, but please read till the end as I have listed some simple ways to build similar documentation.

1) Stripe:

Stripe is one of the well known payment gateway used by many merchants. It allows individuals and businesses to accept the payment easily over the internet. I have gone through the documentation that was offered by them and I should say that the way it was represented was in a clean and easy to understand by the visitors. The API documentation that was offered by them was really amazing. There was a Syntax highlighter that was used, that allowed to display the source code in different colors as well as fonts.

Towards the left there were different topics that were listed by it. If you are planning to build a website related to API or where the source code is give much importance than definitely you should visit the documentation that is offered by stripe. The way the documentation for it was represented was commendable. There were different topics or the categories that were listed towards the left which is indeed eye catching for the visitors.

stripe

Stripe Documentation Example
  • API Documentation
  • Ease of Use
5

2) MailChimp: 

MailChimp is an email service provider that allows you to create, send as well as manage email newsletters. The documentation that is provided by them is very eye catching. It allows to add the links for the documentation along with Syntax Highlighter. Towards the left there are different sections that are displayed for the guide and there is different URL for each of the section. The documentation provided by MailChimp is displayed in very appealing way also all the points and instructions are mentioned very clearly.

mailchimp_doc

 

3) Yoast:

It will help you for the optimization of the site and also provides with the complete solution for SEO. Yoast provides with clean documentation, below each document there is a contact us form that allows to contact the support team in case of any of the queries. It also provides with a proper pagination along with all the categories that is listed towards the left. One can easily locate the category through the Search option present towards the top. It will also provides with the information when the document was updated lastly.

yoast

4) Microsoft:

After going through the documentation that is offered by Microsoft, it is very appealing for the visitors. It includes videos and images along with the documents that allows the visitors to have a better understanding. There are different sections for each of the category and there is an in-depth documentation that is provided by it. The thing that makes the documentation of Microsoft to be very appealing is the images and screenshots used by it. As images are always worth a thousand words.

microsoft

5) Apple: 

The way in which the documentation of Apple is present is really amazing. There are different points as well as instructions that are covered in the guide that is offered by them. Towards the bottom it provides with the feedback option where the visitors can share their views regarding a particular document. Also the users can add the suggestion in order to improve the particular document. There are also screenshots that are included to have a better understanding of the document that is provided. apple

6) Ionic:

The guide for ionic is represented in a very elegant way with the linking to the next documentation towards the bottom. Each of the topic is distinguished by different chapters and there are different icons that are represented for it. There is a sticky sidebar towards the left that is provided by it. There is a search option that is present at the top that will help to search a particular document very easily. The document is represented in such a way in order to make it appealing for the visitors and also it is very easy to understand from the perspective of the visitors.

ionic

7) Twilio:

The guide that is provided by Twilio is easily categorized into different categories. There is a Quickstart, Tutorials, API Reference and Helper Libraries that is provided by it. Towards the left it consists of all the sections that gets displayed based on the category that is selected. There are also different links that are provided by the particular doc and also consists of the linking to the next document. There are large number of sections that are added for each of the document that helps to have a better understanding. In case of any of the source code there is a Syntax Highlighter that is used for it.

twilio

8) Skype:

The user manual or documentation that is provided by Skype can be considered as a step wise manual with a complete understanding of the query that you are struck. Towards the top, it displays the count for the total number of articles. And there are different articles that are belonging to the particular category. There are different images and screenshots that are displayed for the particular doc. Towards the bottom there is an option that tells that whether a particular article is helpful or not. The way in which each of the step is displayed, makes it easy for the visitors to have a better understanding.

skype

9) WHMCS:

The documentation or the manual of WHMCS gives you the clear vision of the document that you are searching for. On the Home page of WHMCS there are different topics that are listed and one will easily find the document that one is looking at through exploring the following topics. Towards the top it will list out the topics with different sub sections. Under the documentation there is a separate topic that is present for the Community forums. There is a step wise explanation given for each of the topic for the How To Guide. There is also a proper linking that is given for each of the topic.

whmcs

10) Blesta:

The user manual that is provided by Blesta provides with a very good documentation that is indeed very simple and easy to understand. There is a separate guide that is prepared for the Users as well as Developers. As there are lots of sections that are present under a single topic, so towards the bottom it gives you the option to Show More. For each of the topic, it gives the details of the writer along with lastly the particular document was modified. There is a Navigate space that is present towards the right where one can search the topic that one is looking for. There are also breadcrumbs that are provided for each of the page that helps the user for the easy navigation. There is a tree like structure that is provided by this document.

blesta

11) BigCommerce:

The manual that is provided by BigCommerce is designed and presented in such a way to attract the visitors to the site. There are also links that are given for Chat and Community Forum in order to contact the support team in case of any of the queries. It also allows the user to give the feedback whether the following topic was useful for the visitors or not. The documentation also provides with different links in order to help the user to have a better understanding when they are referring to a particular topic.

big-commerce

12) Freshservice:

The manual lists out all the topics along with the count and sub topics for each of the topics. On clicking on the particular topic the user will be redirected to the page that one needs to refer. Towards the right, it will list out all the related articles along with the option to print the particular article. There are also different links that are added for each of the topic, it also allows to get the feedback from the visitors whether the topic is useful or not. It is written in very appealing way to attract the visitors and that will keep them glued to the guide. There is a different section that is present where the visitor can directly download the guide and go through it whenever required (for the offline reading).

freshservice

Creating Product Documentation through WordPress:

If you are planning to build one such documentation for your website than this can be achieved easily through WordPress. I would recommend to read this Ultimate Guide to Create Documentation to easily build and publish a beautiful guide just like the mentioned user manual examples. I have listed few free plugins to create documentation and along with that, check some WordPress Themes to implement a nice design.

Documentor:

Documentor is one of the best WordPress plugin in order to create the online product documents. There are different content types that are supported by this plugin such as videos, images, code snippets, Tables, Google Maps etc. The WordPress plugin is bundled with many features and to list a few of them includes:

  • For the offline reading it supports Save as PDF option.
  • It allows the users to submit feedback for any of the documentation section.
  • There are multiple skins that are supported for it to make it appealing for the visitors.
  • There is also a print option provided in order to print the particular manual or guide.
  • As Social Media plays a very important role for building of any of the site, so it supports Social sharing option.
  • There can be number of sections and subsections that can be added for the particular document.
  • It also allows you to embed the videos, Google maps and tables very easily with it.
  • Full control over the settings panel in order to change the color as well as fonts.

These are just of few of the features offered by Documentor plugin. This plugin is bundled with so many great features in order to create a perfect document for your site. A good documentation will definitely help you to increase the sale of the product. Moreover the content, images, screen shots and videos that are included while creating a document also plays a very crucial role. All the features that are provided will surely help you to build a document of your choice. Hope this post will help the users to build a better documentation and help guide for their site.

Highlight Text or Use Marker in Product Documentation

Karishma Sibal Leave a comment

Highlighting of the text or using a marker for any product documentation can be considered as one of the marketing strategy that will compel the visitors to read a particular text. It can be considered as an effective means that will summarize the information from the particular piece of content. It will surely help to bring more visitors to your site and thus diverting more traffic that is surely very beneficial. Most of the blogging websites or any other established website uses this technique that highlights the text with some background.

Note: Create Product Documentation or Technical Guide using WordPress

Benefits of Highlighting text or using Marker

  • Highlighted text helps to retain the information easily from the particular content.
  • It will help to bring more readers to your site rather than the plain text.
  • Helps to save the time of the readers instead of reading the whole content.
  • It provides a better experience to the user or readers.

Methods to highlight the text in WordPress:

There is no separate option or button available in the WordPress editor to highlight the text. This can be easily achieved through installing plugins and other approaches.

1) CKEditor for WordPress:

cke

CKEditor is the text editor that will be used inside web pages. This plugin will replace the default WordPress editor with the CKEditor. It also allows to post comments with CKEditor to provide styled as well as colorful comments.

2) WP Emphasis:

wp-emphasis

This plugin is used to highlighting and permalinking text of the emphasis script. One need not set anything for this to work, tap shift twice and one can start highlighting the text.

emphasis-highlighting

3) Through CSS:

If you are familiar with the code then you are able to highlight the text through the CSS code by following the below steps:

Step 1] You will need to create a class in the CSS file and give it a unique name say “content-highlight”

Step 2] Create a child theme and put the class (created from step 1) in the CSS file of the child theme.

.content-highlight { background-color:#FFFF00; }

Step 3] One can choose the color from the color picker and easily switch to text view in the WordPress editor and wrap the text in the way you want it to be highlighted in the following way:

<span class="content-highlight">… text to highlight …</span>

You are done by following the above steps.

4) Inline Styling:

It is also possible to insert the code into the post for the content that is to be highlighted. One can view the post in the text editor add add the below mentioned code.

<span style="background-color:yellow;"> … your text here … </span>

Though there is no separate option given to highlight the text in WordPress but the above ways will definitely help you to make your documentation approaching for the visitors and definitely come up with a good one.

Hope this article was really useful to you guys. And feel free to contact us if you find some more ways to highlight the text.  As there is a great saying that “Knowledge increases by sharing and not saving!“

How to Embed a Presentation Slideshow inside Product Documentation

Karishma Sibal Leave a comment

The key factor to write a documentation for a website is to make the visitors to understand your product in a better way. While writing a documentation one can include images, PDF, Video, Charts, PPT, Galleries etc. Including this things will definitely help your visitors to understand the product and get their queries solved very easily. A Slideshow can be indeed very useful for the clients when they are referring the documentation.

Documentor WordPress Plugins will help to create the online product documentation very easily. One may include code snippets, videos, images, PDF embeds, Google Maps, Tables for their documentation. Also one can easily embed a presentation slideshow inside a Product Documentation by following the simple steps.

Simple Steps to Embed a Presentation Slideshow inside Product Documentation:

Step 1] In order to embed a presentation slideshow for the product documentation, Documentor WordPress Plugin and Embed Any Document Plugin is to be activated. When one has downloaded the zip file and added to the plugins folder go to:

Admin Panel >> Installed Plugins >> Embed Any Document >> Activate (To activate Embed Any Document Plugin)

Admin Panel >> Installed Plugins >> Documentor >> Activate (To activate Documentor Plugin)

Ones the plugin is activated then one will find the Embed Any Document option and Documentor option in the admin panel where the settings related to it can be done.

NOTE: There are various WordPress Plugins that are available, that can be activated to embed PDF, MS Office, documents on the WordPress site using Google Docs Viewer or Microsoft Office online. 

Step 2] In order to create the documentation go to:

Admin Panel >> Documentor >> Create New

One can create the new guide from this and there can be different sections that can be added for the particular guide and accordingly the settings can be added for the same.

Step 3] While adding a section for a particular guide there will be an option of Add Document that will be present towards the top besides the Add Media where the Slideshow can be added easily.

embed code plugin

While selecting the particular option one can easily upload the document, add its URL and easily add it from Dropbox, Drive and Box and then click on the Insert option.

add document

Step 4] After you are done inserting the Slideshow for the particular section then click on the Insert option that is present towards the bottom.

Step 5] One will find the embedded code for the particular guide from the Embed Code tab that can be used to display it on the front end.

Following the above simple steps, one can easily add a Presentation slideshow inside a Product Documentation that will be displayed in the embedded form on the front end.

8 Free WordPress Plugins to Create Product Documentation

Karishma Sibal Leave a comment

One of the important aspect to build a powerful website is to provide a good and powerful documentation to the visitors so that they can have a better understanding of the product. It is indeed very helpful for the visitors as well as the staff agents. The  visitors can refer the documentation help if they have certain queries and thus saving the time of the staff agents as well. Product Documentation can be considered as a key that will open the doors to all the questions that arises in the minds of the visitors. WordPress is the best website builder and in this article, I will list down free plugins to create product documentation using WordPress CMS.

Advantages of Product Documentation:

  • Visitors can access the information easily anywhere and anytime
  • Reduces the work of the staff agents as they will not have to answer the same question
  • Receive feedback from visitors to improve the guide and engage visitors
  • Useful  in SEO
  • Creates electronic version of the documentation that can be used to send electronic drafts.

Free WordPress Plugins to create Product Documentation:

This plugin helps to create online product guide or help documentation very easily on WordPress site. One can create and publish a profession looking documentation quickly with an elegant design and implementation.

Documentor Pro

Premium version of Documentor comes with following features

  • Create Multiple Guide
  • 5 Pre-designed ready themes
  • User Suggestion Box
  • Export to PDF
  • AJAX Loading of content
  • and lot many other features.

It is very responsive, number of sections can be added, custom links can also be added in table of contents, compatibility with WPML, Settings panel to change the colors and fonts and many more.

documentor

It helps the site operators to create detailed, hierarchical documentation for the site’s authors, editors and contributors view-able in the WordPress admin. One can pull in help documents from another WP Help install and they will be automatically updated when the source documents change. It is perfect for WordPress multi-site installs.

WP Help

It helps to easily create documentation for any number of products, organized by product and by subsections within each product. One can easily use this to create instruction guides for anything. Documentation articles will have schema.org micro-data. It has documentation with a user-friendly structure for the visitors. It works on multisite WordPress installations as well as regular WordPress sites.

organized docs

It helps to create an attractive and professional knowledge base. It is very responsive and easy to use and customize. It also provides with integrated breadcrumb and super fast search. Compatible with all major browsers and devices. There is also custom ordering of articles and categories by drag and drop. This plugin copies the page template and related CSS into your active theme, one can edit those files to adjust the layout and design.

WP Knowledgebase

This plugin allows the WordPress bloggers to add step by step instructions to their site. The instructions can be quickly created and linked to corresponding images. It will be indeed a great help to simplify the online product manuals. This plugin helps to build tutorials, share knowledge and thus keeping traffic at your blog.

instruct

It offers easy to use and configure and powerful panels to display FAQ, term definitions or any of the short content. It offers contextual coloring to highlight or group the related items. One can group and tag items to improve user adaptation and understanding. It also has an ability to set the initial state of any of the panel.

knowledge center

One can easily add Knowledge Base or FAQ on any part of the WordPress site. One can easily assign categories and display it on up to Four(4) Columns in any part of your website. It creates shortcode using the plugin’s powerful shortcode generator with options to display per category, order by title or date, controls visibility and assign layout options. It is fully responsive and Browsers compatible.

knb

One can organize and create great looking documentation with this plugin. It helps to create Slick Documentation for anything. Also creating a topic/item to document with a sidebar menu. One can also attach a introduction page to each topic/item. There is an easy drag and drop that organizes Posts and Categories.

doc it

These are some of the free WordPress Plugins that will help to create great product documentation and ease your work!