🚀 Quick Start (2 lines of code)

The fastest way to add colorTXT to any website:

<!-- Add this script tag to your <head> section --> <script src="https://www.colortxt.com/js-widget/colortxt-widget.js"></script> <!-- Add this widget anywhere in your <body> --> <colortxt-widget type="menu"></colortxt-widget>
That's it! Your website now has a colorTXT menu that lets readers toggle colored text on and off.

📖 Step-by-Step Installation

Step 1: Include the colorTXT Script

Add this script tag to your HTML <head> section:

<script src="https://www.colortxt.com/js-widget/colortxt-widget.js"></script>

Step 2: Add the Widget

Place the colorTXT widget element anywhere in your HTML:

<colortxt-widget type="menu"></colortxt-widget>

Step 3: Test Your Installation

Refresh your page and look for the colorTXT menu. Click it to see your text transform with colors!

⚙️ Widget Configuration Options

Customize your colorTXT widget with these attributes:

Attribute Options Description
type "menu" | "button" Display as dropdown menu or simple button
initial-enabled "true" | "false" Start with coloring on or off (default: false)
position "left" | "right" Align menu to left or right (default: right)
env "prod" | "dev" Production or development environment

🎨 Widget Examples

Basic Menu (Recommended)

<colortxt-widget type="menu"></colortxt-widget>

This creates a dropdown menu with full color options

Simple Button

<colortxt-widget type="button" initial-enabled="true"></colortxt-widget>

This creates a simple on/off toggle button

Left-Aligned Menu

<colortxt-widget type="menu" position="left"></colortxt-widget>

Menu aligned to the left side

🎯 Integration Examples

WordPress Integration

Add to your theme's header.php file:

<!-- Add before </head> --> <script src="https://www.colortxt.com/js-widget/colortxt-widget.js"></script> <!-- Add in your navigation menu --> <colortxt-widget type="menu"></colortxt-widget>

React Integration

// Add script to your index.html <script src="https://www.colortxt.com/js-widget/colortxt-widget.js"></script> // Use in your JSX (React will treat it as a custom element) <colortxt-widget type="menu"></colortxt-widget>

Vue.js Integration

<!-- In your index.html --> <script src="https://www.colortxt.com/js-widget/colortxt-widget.js"></script> <!-- In your Vue template --> <colortxt-widget type="menu"></colortxt-widget>

🔧 Troubleshooting

Widget Not Appearing?

Check these common issues:
  • Ensure the script tag is in the <head> section
  • Verify the script URL is correct and accessible
  • Check browser console for any JavaScript errors
  • Make sure you're using the correct widget element name

Colors Not Working?

Possible solutions:
  • Try clicking the widget to enable coloring
  • Check if your CSS is overriding colorTXT styles
  • Ensure your content is in standard HTML text elements
  • Some dynamic content may need to be re-processed

🚀 Advanced Configuration

Custom Styling

You can customize the widget appearance with CSS:

colortxt-widget { position: fixed; top: 20px; right: 20px; z-index: 1000; }

Multiple Widgets

You can have multiple widgets on the same page:

<!-- Header menu --> <colortxt-widget type="menu" position="right"></colortxt-widget> <!-- Footer button --> <colortxt-widget type="button"></colortxt-widget>

Environment Settings

For development and testing:

<!-- Development environment --> <colortxt-widget type="menu" env="dev"></colortxt-widget> <!-- Production environment (default) --> <colortxt-widget type="menu" env="prod"></colortxt-widget>

📞 Need Help?

Having trouble with your installation? We're here to help!

Support Options: