Customize Froala AI Assist with Tone and Translation Presets

Out of the box, Froala AI Assist provides generic options for “Tone” and “Translation” dropdowns. They work fine for demos, but these lack the nuance required for enterprise applications.

Your users expect tools that match their specific workflow, whether that means enforcing strict legal compliance, adopting a playful brand voice, or translating into languages relevant to their region.

The Froala AI Assist plugin allows you to customize these presets completely through configuration. By leveraging aiAssistToneOptions and aiAssistTranslateOptions, you can build a dynamic, context-aware editing experience without modifying the core library code.

Key Takeaways

• You can replace default tone presets with brand-specific instructions using aiAssistToneOptions.
• Translation targets are fully customizable via aiAssistTranslateOptions, allowing for regional or industry-specific language lists.
• Dynamic configurations allow you to populate options programmatically based on user roles or browser locales.
• Proper prompt engineering within these options ensures the AI preserves HTML structure while altering content style.

Why Generic Presets Break Down

Consider a few real scenarios:

• A law firm uses “Professional” to rewrite a contract clause. The AI returns friendly, approachable language—the exact opposite of what legal writing demands. The lawyer now has to edit it back to formal precision, defeating the purpose.
• A SaaS onboarding team uses “Casual” for help documentation. The AI injects slang and contractions. It works for the hero’s journey marketing copy, not for someone trying to reset their password at 2 AM.
• A global marketplace shows all 50 languages to every user. A Spanish speaker in Madrid sees “Translate to Mandarin” as an option. They never use it. The dropdown bloats. Discoverability suffers.

These aren’t edge cases. These are the daily reality of shipping AI tools to real teams.

How It Works: The Configuration Structure

Froala gives you two configuration keys to customize tone and translation presets:

1. aiAssistToneOptions: Replace tone buttons with your own.
2. aiAssistTranslateOptions: Replace translation buttons with your own.

Both use the same simple structure: an array of objects. Each object has two properties:

1. title: The string displayed to the user in the UI.
2. prompt: The instruction sent to your AI backend. This tells the model how to rewrite or translate the selected text.

Understanding this structure is the first step to learning how to customize AI tone editor behaviors effectively.

Real Example For Creating Brand-Specific Tones: A Law Firm

Let’s build this concretely. Imagine you’re building a CMS for a law firm. “Friendly” is a liability. “Formal” is too vague. You need precise, distinct options.

Step 1: Define Your Tone Objects

Create an array with tone presets tailored to your workflow:

const legalTonePresets = [
  {
    title: 'Legally Precise',
    prompt: 'Rewrite the following content using precise, unambiguous legal terminology. Ensure all liabilities are clearly stated. Avoid casual language or hedging. Preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Client-Friendly',
    prompt: 'Rewrite the following content in plain English suitable for non-lawyer clients. Simplify complex jargon but retain accuracy. Use short sentences. Preserve all HTML formatting, links, and styles.'
  },
  {
    title: 'Internal Memo',
    prompt: 'Rewrite the following content as a concise internal memo. Focus on action items and deadlines. Use bullet points if helpful. Preserve all HTML formatting, links, and styles.'
  }
];

Notice what’s happening here: you’re not asking for “professional” tone. You’re specifying the exact linguistic goal for each button. “Unambiguous legal terminology” is different from “plain English.” The AI can now target distinct stylistic clusters instead of guessing what you mean by “professional.”

Step 2: Inject Into Froala Config

Pass this array into the initialization:

new FroalaEditor('#editor', {
  pluginsEnabled: ['aiAssist'],
  aiSupplementalTermsAccepted: true,
  
  // Replace default tones with your legal presets
  aiAssistToneOptions: legalTonePresets,
  
  // Your API endpoint
  aiAssistEndpoint: 'https://your-api.com/rewrite'
});

Step 3: What Actually Changes

Now when a lawyer opens the “Edit Smarter” dropdown, they see three buttons: “Legally Precise,” “Client-Friendly,” and “Internal Memo.” Each one produces output calibrated to a specific use case. The AI no longer guesses. The lawyer no longer edits the AI’s output. The document stays correct.

Going Deeper: Role-Based Customization

The pattern scales. You can generate different tone presets based on user role:

function getToneOptionsForRole(userRole) {
  const allTones = {
    junior_editor: [
      { title: 'Proofread', prompt: '...' },
      { title: 'Simplify', prompt: '...' }
    ],
    senior_editor: [
      { title: 'Proofread', prompt: '...' },
      { title: 'Simplify', prompt: '...' },
      { title: 'Legal Review', prompt: '...' },
      { title: 'Executive Summary', prompt: '...' }
    ]
  };
  
  return allTones[userRole] || allTones.junior_editor;
}

Junior editors see safe, basic options. Senior editors see the full toolkit. The same AI Assist plugin powers both experiences. One configuration, multiple implementations.

Common Pitfalls to Avoid

Ignoring HTML Preservation

If you omit “Preserve all HTML formatting” from your prompts, the AI may return plain text. When Froala inserts this back into the editor, all styling, links, and embedded media will disappear. Always include this instruction in every prompt string.

Overly Complex Prompts

Keep the prompt field focused. If you need extensive rules, consider moving them to your backend’s system prompt rather than cluttering the client-side config. The client-side prompt should handle the immediate transformation task.

Hardcoding Sensitive Data

Never embed API keys or secret tokens in aiAssistHeaders on the client side. Use a proxy server or ensure your CORS policy restricts access to trusted domains.

Conclusion

The flexibility of aiAssistToneOptions and aiAssistTranslateOptions transforms Froala AI Assist from a generic utility into a tailored productivity tool. By defining precise prompts and generating options dynamically, you ensure that the AI behaves consistently with your brand standards and user expectations.

Start by auditing your current content workflows. Identify the recurring style adjustments your team makes manually, then encode those patterns into custom tone presets. The result is a faster, safer, and more consistent editing experience.

Read the full AI Assist Plugin documentation to explore additional configuration options like aiAssistPromptTemplate and aiAssistResponseParserPath.

Frequently Asked Questions

Can I add icons to my custom tone buttons?

Currently, the AI Assist dropdown renders text-only titles for tone and translation options. Icons are reserved for standard toolbar buttons. To improve discoverability, use clear, descriptive titles like “Make Professional” or “Translate to FR.”

Do these options work with React, Vue, or Angular wrappers?

Yes. The aiAssistToneOptions and aiAssistTranslateOptions are part of the core Froala configuration object. Pass them into the config prop or equivalent initialization method in your framework-specific wrapper component.

Can I mix default and custom tones?

Yes. You can retrieve the default options and concatenate your custom ones. However, it is generally cleaner to define a complete set of curated options to maintain a consistent UX and avoid confusing duplicates.

What happens if the AI fails to preserve HTML?

If the AI strips tags, the editor will render plain text. To mitigate this, ensure your backend system prompt reinforces HTML preservation. You can also use the aiAssistRequest custom function to sanitize or repair the response before returning it to Froala.