Introduction
You may be familiar with our Typewriter Plugin, which is typically used for leave-behinds, product tours, and other linear demos where the typewriter effect is triggered by a specific step in the demo flow. However, for live demos with non-linear flows, this article will guide you through creating a typewriter effect using custom JavaScript. To explore custom JavaScript further, check out this article.
The intent of the Typewriter effect is to automate portions of text input within the demo. For example the text in a search or chat input.
We use the TypeWriter effect for a few reasons:
- Prevent accidental entry of incorrect data / typos
- Prevent entry of undesirable data
- Control the flow and pace of the demo
How to Make the TypeWriter Effect Work
The JavaScript will do the bulk of the work and includes the definition of the object where the text is going and the text itself. Then, we'll use a simple Send Message action to trigger the TypeWriter effect to start.
1. Leverage the below code to create a new Custom JS snippet:
reprise.on("change_screen", (context) => {
/* Update below two values to match our application and desired text */
if (context.screen.title == "09. Teams - Forum Chat") {
const inputField = document.querySelector(
'input[reprise_id="vnde-ab4fbeacd7b24f65ba8ed80555209563"]'
);
if (inputField) {
inputField.addEventListener("click", () => {
typeWriter(
inputField,
"Great! How are things for you?",
"flow_next" // Optional
);
});
}
}
});
/* Below is templated code; no need to adjust below this comment */
const typeWriter = (element, text, action = false, speed = 100) => {
if (!text.length) {
if (action) {
reprise.execute_action({ type: action });
}
return;
}
// Helper function to determine if the element is an input/textarea or contenteditable
const isContentEditable = element.getAttribute("contenteditable") === "true";
// Helper function to type the next character
const typeNextChar = (remainingText) => {
if (!remainingText.length) {
if (action) {
reprise.execute_action({ type: action });
}
return;
}
if (isContentEditable) {
element.textContent += remainingText[0]; // For contenteditable elements
} else {
element.value += remainingText[0]; // For input/textarea elements
}
setTimeout(() => typeNextChar(remainingText.slice(1)), speed);
};
// Reset value/text if current matches the text
if (isContentEditable) {
if (element.textContent === text) {
element.textContent = "";
}
} else {
if (element.value === text) {
element.value = "";
}
}
// Start typing
typeNextChar(text);
};
2. Thankfully, the only updates we need to make are on lines 3, 5, and 11:
-
- On line 3, update and enter the complete title of the screen where you would like to run this typewriter code
- On line 5, update the query selector to match the object type (e.g., <input>) and reprise_id of the text field (this can be gained from the HTML within the Editor).
- On line 11, update the first text string to define the text to be typed.
- Optional: on line 12, you can add "flow_next" to move the demo forward to the next step after the typing has finished, or remove it.
Best Practices
- Typically, you will want to have the text box act as the trigger to start the typing, but you don't need to. Any object, guide, etc. can send that start_typing message to trigger the guide.
- The done_typing message can be used to trigger an activity after the TypeWriter effect is completed. For example, you could trigger a 'next screen' action after the text completes to emulate the search activity.
- If you want multiple TypeWriter effects on the same page, just update the message names in lines 2 and 4 so they are unique to the individual effect (e.g., start_typing_1 & done_typing_1)