Helpshift just gave a superpower to its Help Center customers
by Aniket Hendre and Shubham Mangal
Helpshift is a customer service SAAS platform that enables you to provide a self-help experience & real-time, conversational support experience on different platforms and devices.
We provide Self Help Experience using Help Center which contains various Frequently Asked Questions (FAQs) under different sections, popular and related articles blocks. Users can search through these FAQs as well as provide feedback on the usefulness of the FAQ.
We recently revamped our legacy Help Center and built Help Center 2.0, which is more robust, customizable, and human-centered. For more details on Help Center 2.0, read the below article.
Now, let’s talk about the elephant in the room — New Help Center’s Superpower — Branding and Customizations.
Branding and Customizations
Each customer has their own branding and would like their Help Center to represent their brand. For branding, the ability to have customization options is really important. Below are some examples of such customizations:
- Colors — Background/Foreground/Content/Text
- Fonts
- Cover Image & Text
- Header and Footer Links
- Social Links
- Logos
- Notes and Copyrights Text
In the world of Helpshift’s customers, any configuration change done to Help Center goes to millions of end-users. Any small gap or incorrect configuration can make a huge difference in the experience of the end-user.
With these powerful customization options, there comes the responsibility to be cautious with the changes as even a small change can impact millions of users. So, there needs to be a way for businesses to make changes and preview the Help Center reliably.
Here comes the instrument to wield the mentioned superpower — Live Preview.
Live Preview
Live preview is the ability to view changes in real-time. It helps validate and experiment with changes before pushing them to millions of users.
A key difference between a good and a bad product is the time it takes to get feedback on the changes. “Less the feedback response time, faster is the change cycle.”
With a greater ability to customize Help Center, the need to preview changes in real-time is central to providing a high-quality end-user experience.
Let’s look at how businesses can leverage live preview. Let us take the Color Schema change, there are various combinations of colors that can be selected for different components. Without preview, it would need designers and developers to try out different combinations and decide on the right palette. With the preview, an admin can select the colors and preview them simultaneously.
Implementation
To show the most accurate version of Help Center as a preview, we needed to render the actual Help Center in the Branding & Customization dashboard. To do this, we have embedded an iframe pointing to the Help Center of that domain.
But how do we render the changes without actually saving customizations and reloading the preview? We set up a communication channel between the Branding & Customization dashboard and Help Center preview iframe. We used postMessage API to communicate.
postMessage API allows you to set up communication channels between different windows. In this case, the branding and customization dashboard informs the preview iframe about the changes that have been made and the preview iframe communicates back that requested updates are performed on it.
Sending Events on Config Update
In the following example code, data changes are being passed from the dashboard to the preview iframe. Events corresponding to preview are identified by PREVIEW_EVENT_TYPE eventType. field and value determine the actual change.
iframeContext.contentWindow.postMessage(
JSON.stringify({
eventType: PREVIEW_EVENT_TYPE,
config: {
field,
value
}
}),
"*"
);Handling Events on Config Update
In the preview iframe, an event handler listens to all the messages coming from the dashboard and calls an appropriate function to apply the change.
window.addEventListener("message", (event) => {
const {eventType, config} = JSON.parse(event.data); if (eventType !== PREVIEW_EVENT_TYPE) {
return;
}
const {field, value} = config;
switch (field) {
case field1:
// Update based on value.
case field2:
// Update based on value.
...
}
})
Update Cycle
Conclusion
With the above approach, the following capabilities were added to the Live Preview
- Ability to immediately preview the customizations. There is no need to reload the page or open in new tab.
- Ability to emulate the preview for different devices and platforms.
- Preview for different pages of Help Center.
- Preview to be exactly the same as actual Help Center.
- Preview for different languages.
Live Preview of Branding & Customizations for Helpcenter 2.0 made the experience of making changes to Help Center smooth and easy to use. This allowed customers to adopt this easily and in no time. Many customers started using this from Day 1 itself and the adoption rate is growing ever since.
Few examples of how customers have customized and are using Help Center 2.0 in their way — Zynga Player Support, Nordeous Support, Tencent Game Support.
