Identifying jQuery Selectors for Use in Microcontent Display Rules

Problem

As Senior Technical Writer and Whatfix Lead at Consensus Cloud Solutions, part of my role entails transitioning a small group of technical writers away from traditional, single-source authoring and towards the regular design, creation, management, and analysis of in-app, just-in-time digital adoption microcontent. One aspect of this transition involves teaching my team how to utilize the web apps’ underlying elements to customize the digital adoption content. This involves identifying HTML elements through jQuery or CSS selectors and including the selectors in Whatfix display rules. Given that my team has no prior involvement in web development and we work asynchronously, I needed to create a training document that my team could reference at their convenience. I also wanted to familiarize my team with the very basics of reading HTML code.

Solution

I compiled these step-by-step instructions as a reference sheet my team could use to begin exploring the process of identifying jQuery selectors. While these instructions are not necessarily the easiest way to identify selectors, I intentionally wrote them so my team would gain more hands-on experience reading HTML code.

Results 🤩

These instructions, along with a series of workshops where I guided my team through the process, have resulted in every member of the Technical Writing team at Consensus increasing their capacity to both ideate Whatfix content that relies on selectors and independently identify selectors for use in that content. I have since been able to delegate selector identification tasks to members of the team. Their increased capacity also means they more fully understand how Whatfix content works.