RTL Layout Support

Docs

RTL Layout Support

Configure your chat widget for right-to-left (RTL) languages like Arabic, Hebrew, Persian, Urdu, and other RTL languages.

N8N Chat UI provides native support for right-to-left (RTL) layout, making it perfect for websites and applications serving Arabic, Hebrew, Persian, Urdu, and other RTL language communities.

Premium Feature: RTL layout is only available for premium users. Upgrade your plan to unlock this feature.

Overview

The RTL layout feature allows you to configure your chat widget for right-to-left languages. When enabled, the entire chat interface mirrors horizontally - messages align to the right, the input field flows right-to-left, and all UI elements position appropriately for RTL reading patterns.

This feature is essential for providing a native experience to users who speak Arabic, Hebrew, Persian, Urdu, and other right-to-left languages.

Widget Type Support: This feature works seamlessly with both popup and in-page widget types, ensuring consistent RTL experience regardless of how you've configured your chat widget display.

Configuration

RTL layout is configured using the direction property in your widget's theme configuration:

<script type="module" defer>
  import Chatbot from "https://n8nchatui.com/v1/embed.js";
 
  Chatbot.init({
    n8nChatUrl: 'YOUR_N8N_CHAT_WEBHOOK_URL',
    theme: {
      direction: 'rtl', // Enable RTL layout
      // Other theme properties
    }
  });
</script>

Available Values

rtl - Right-to-left layout for Arabic, Hebrew, Persian, Urdu, and other RTL languages
ltr - Left-to-right layout (default - standard for most languages)

You can also enable RTL layout directly from the widget customization interface:

Navigate to the Advanced section in your widget customization panel
Find the Layout Direction setting
Select RTL for right-to-left languages
The preview will update in real-time to show the RTL layout

Supported RTL Languages

This feature is particularly valuable for websites targeting users who speak:

Arabic (العربية) - Widely spoken across the Middle East and North Africa
Hebrew (עברית) - Primary language of Israel
Persian/Farsi (فارسی) - Official language of Iran, Afghanistan, and Tajikistan
Urdu (اردو) - National language of Pakistan and widely spoken in India
Kurdish (کوردی) - Spoken across Kurdistan regions
Pashto (پښتو) - Official language of Afghanistan
Sindhi (سنڌي) - Regional language in Pakistan and India

Best Practices

Content Translation

When enabling RTL layout, remember to translate all your chat widget content:

Welcome messages and greetings
Input placeholders and button labels
Error messages and system notifications
Any custom CSS text content

Multi-Language Support

If your website serves both RTL and standard language users, consider:

Implementing language detection based on user preferences
Using separate widget instances with different configurations
Leveraging session management for language-specific conversations

Benefits

Supporting RTL languages can significantly improve your website's:

Global Reach: Access to 400+ million Arabic speakers and other RTL language communities
User Experience: Native reading experience increases engagement and conversion rates
Accessibility: Improved usability for RTL language speakers

Custom CSS - Add custom styling for RTL-specific adjustments
Metadata Configuration - Send language preferences to your n8n workflow
Session Management - Manage separate conversations for different languages

Summary

Native RTL layout support for global audiences
Simple configuration via theme settings or customization panel
Real-time preview and instant layout updates
Perfect for Arabic, Hebrew, Persian, Urdu, and other RTL languages
Improves user experience for international markets
Works seamlessly with all other widget features and customizations

Chat Streaming