Get Started

Typewriter is a Joomla plugin  adds dynamic, customizable typewriter text animations to Joomla sites, enhancing user engagement with minimal setup. This documentation covers the installation, configuration, and usage of the Typewriter plugin.

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: Typewriter_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the Typewriter_UNZIP.zip package. After unzipping, you will find the following contents:

• plg_typewriter.zip: This is the installation file compatible with Joomla 4.x and Joomla 5.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4 & 5: Navigate to Extensions > Install, then click on the "Upload Package File" tab. Click "Browse" to select the installation file (plg_typewriter.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find System - Typewriter in the list.

General Settings

• Default Speed: Set the default typing speed in milliseconds.
  • Default: 200

To use the Typewriter plugin, insert the shortcode with your desired text and settings into your Joomla articles or custom HTML modules. Below are some examples demonstrating various configurations.

Basic Usage

{typewriter text1="Welcome to Our Website" text2="We Offer Amazing Services" text3="Get in Touch with Us" /}

This will display the typewriter effect with the specified texts using default speeds and cursor settings.

Custom Typing and Erasing Speeds

{typewriter text1="Fast Typing" text2="Slow Erasing" typingSpeed="50" erasingSpeed="200" /}

This configuration sets the typing speed to 50 milliseconds per character and the erasing speed to 200 milliseconds per character.

Delay Before Erasing

{typewriter text1="Pause Before Erasing" delayBeforeErasing="3000" /}

This adds a 3-second pause before the text starts erasing after it has been fully typed.

Custom Cursor Settings

{typewriter text1="Custom Cursor" cursorColor="#FF0000" cursorThickness="0.2em" /}

This example sets the cursor color to red and the cursor thickness to 0.2em for better visibility.

Multiple Instances

{typewriter text1="First Instance" text2="With multiple texts" typingSpeed="100" erasingSpeed="50" delayBeforeErasing="1000" cursorColor="#0000FF" cursorThickness="0.15em" /}
{typewriter text1="Second Instance" text2="With different settings" typingSpeed="200" erasingSpeed="100" delayBeforeErasing="2000" cursorColor="#00FF00" cursorThickness="0.1em" /}

This example demonstrates how to use multiple instances of the typewriter effect on the same page, each with different settings.

• Customizable Typewriter Text: Add dynamic, engaging typewriter text animations to your Joomla site.
• Flexible Speed Settings: Control typing and erasing speeds, as well as delays before erasing.
• Custom Cursor: Personalize the cursor's color and thickness for better visibility.
• Multiple Instances: Use multiple typewriter effects on the same page with different settings.

• How do I set the typing speed?

  • Use the typingSpeed attribute in the shortcode.

• Can I customize the cursor?

  • Yes, use the cursorColor and cursorThickness attributes in the shortcode.

• How do I add a delay before erasing?

  • Use the delayBeforeErasing attribute in the shortcode.

• Can I use multiple typewriter effects on the same page?

  • Yes, you can use multiple instances of the shortcode with different settings.

• Text Not Displaying: Ensure the plugin is enabled and the shortcode is correctly added to your content.
• Incorrect Speed Settings: Verify the typingSpeed and erasingSpeed attributes in the shortcode.
• Cursor Not Visible: Check the cursorColor and cursorThickness settings.

For further assistance, visit the Infyways Support page.