Generating embeddable Help widgets from a Drupal 8 site
Breadcrumb
- Home
- PronovixBlog
- Generating embeddable Help widgets from a Drupal 8 site
When a problem arises in today’s attention deprived world, we can’t expect our customers to go search for a solution in the documentation. Documentation sites can be complex, they often store the documentation for multiple products and each of the products might have many features. In the best case you will frustrate your customer, in the worst case they might simply give up before finding the information they need.
That is why we developed the Walkhub Help Widget to help site owners guide their visitors to the right documentation content - right inside an application or web site. The simplest way to try out WalkHub Help Widgets is embedthedocs.com, but you can also set up your own widget creation interface easily if you have basic knowledge of web development. In this blogpost, we will guide you through the steps you need to take to replicate the functionality of EmbedTheDocs using Drupal as a content store.
In April we launched EmbedTheDocs.com, a service that lets you create an embeddable Help Widget. Our goal was to make it so simple that you should be able to create one under 2 minutes. Our widget allows users to list a series of online help content (such as technical documentation, articles, blog posts, videos, walkthroughs… anything linkable) relevant to a user’s context, that will open in the same browser window in a separate iframe. Once created on embedthedocs.com, the widget can be placed on any site via its unique embedcode. Anyone can freely try it out on our site after a quick registration.
EmbedTheDocs is sufficient if you only need to create a few Help Widgets. In case you need something more complex, you want to have your own interface, add custom functionality to your widgets, or generate the content for the widget automatically in reaction to the user’s context, this article is for you.
As the EmbedTheDocs site is written on top of Drupal 8 CMS, it is possible to replicate the widget creation feature on other Drupal 8 sites, too. In this section, you will be guided through the process of replicating the widget creation feature, as on embedthedocs.com.
The following steps can be implemented either on an existing Drupal 8 site, or on a newly installed instance. If you don’t have a Drupal 8 site yet, you can install Drupal 8 on your localhost or a dedicated server (we recommend to test the features first on a local server) by following the standard Drupal installation instructions.
The WalkHub Help Widget contains 3 different types of elements: groups, links and walkthroughs. Groups can be used as dividers for links and walkthroughs, but it’s not obligatory to add one. Links can target any content on the web. The YouTube video links will receive a YouTube icon in the widget and the video goes full screen when you click on its title. The third element is the WalkHub walkthrough, which can be added to the widget using its unique URL after you created one on next.walkhub.net. It’s free to add as many walkthroughs as you want on this site. Also, as WalkHub is open-source, you can fork or download it from GitHub.
Paragraphs module is a very powerful implementation of Drupal’s entity system. With the pre-defined paragraph types it is easy to compose content (e.g landing pages). So you could create other types of paragraphs that let you add different elements to your widgets (e.g. a video paragraph, with a proprietary video not hosted on Youtube).
drush en paragraphs
), go to /admin/structure/paragraphs_type and click on Add paragraph type. Type “Group” in the label field, then click on Save and manage fields.
Important! When adding the paragraph types and their fields, the machine names play key roles. The system will only work properly if you use the correct machine names for the paragraph types and fields.
If you followed the steps in chapters I and II, you should now have a widget content type with one multiple value field for the three paragraph types. In the third chapter of this tutorial we install a complementary module for adding the content processing feature.
drush en cors
) and go to /admin/config/services/cors. Paste the following string in the domains field: *|http://next.walkhub.net|OPTIONS,POST,GET|Origin,Content-Type,Accept,X-CSRF-Token|true
If the result is not as expected, try to solve it by clearing the Drupal cache in /admin/config/development/performance.
Feel free to extend the features or theme the widget node’s page.
Got stuck somewhere? Do you need help? Contact us for support!
EmbedTheDocs.com is a convenient way to try out what the Help Widgets offer. If what you need are only a few widgets, EmbedTheDocs.com will suffice.
Your own, private Help Widgets system can offer some extras that proprietary and/or confidential materials may even require:
Kitti started to work at Pronovix in June 2015 as an iTrainee, and this was the first time she met with web programming. During the trainee programme, she evolved a lot on the field of theming and Drupal site building with the assistance of her colleagues. Now she is a Front-End Developer and Site Builder at Pronovix and she also takes part in Devportal architecturing.
Articles on devportals, DX and API docs, event recaps, webinars, and more. Sign up to be up to date with the latest trends and best practices.