Skip to content
English
  • There are no suggestions because the search field is empty.

How do I create a custom button for plain language?

How to Embed Plain Language Directly into Your Page

In addition to the predefined button, you also have the option to create your own button for the Plain Language feature.

This allows you to fully adjust the design, position, and presentation of the button to match your website, giving you complete control over how the button looks.

There are two main options for customization: a partial or full customization of the button.

Partial Customization of the Button

With partial customization, your custom button replaces the standard button. The Plain Language feature will still be triggered automatically when users click your button.

You can choose between two variants:

1. Custom Button Without Tooltip and Icon

In this variant, you don't use any pre-made elements. Your button is completely self-designed and fully replaces the existing button.

No tooltips or icons from the system will be used.

How it works:

  • Include the provided JavaScript file.

  • Do not create an <plain-speech> tag.

  • Instead, create your own custom button.

  • Assign your button the ID plain-speech-custom.

  • Only your custom button will be displayed.

When users click the button, Plain Language translation will be activated. Clicking again will return to the original page.

2. Custom Button with Tooltip and Icon

With this variant, you can still fully customize the design of your button.

The difference is that tooltips and icons from the system will be included.

These will show, for example, whether a translation was successfully made. Additionally, a tooltip will appear when hovering over the button, providing more information about the translation.

How it works:

  • Include the provided JavaScript file.

  • Do not create an <plain-speech> tag.

  • Instead, create your own custom button.

  • Assign your button the ID plain-speech-custom-including-tooltip.

  • Your custom button will now be displayed.

When the button is clicked, Plain Language will be activated. Clicking again will return to the original page.

Additional status indicators will appear during usage:

  • A loading icon will appear on the button when the translation starts.

  • After a successful or failed translation, a corresponding status icon will appear on the button.

  • When hovering over the button, a tooltip with translation information will appear.

  • If the translation takes longer or fails, a tooltip will also appear.

Full Customization of the Button

With full customization, you won't use any pre-made elements.

You fully design your button and control the activation of Plain Language through functions.

Tooltips and icons will not be automatically included in this variant.

How it works:

  • Include the provided JavaScript file.

  • Do not create an <plain-speech> tag.

  • Instead, create your own custom HTML element.

  • Add the functions for activating Plain Language to your code.

The following functions are available to control Plain Language:

  • await EA.activatePlain()
    Activates the Plain Language translation.

  • await EA.deactivatePlain()
    Deactivates Plain Language and returns to the original page.

Additional Available Functions

Several functions are also available to check the status of Plain Language or control its usage.

These include:

  • EA.statusPlain() – Returns the current status of Plain Language.

  • EA.isPlainActive() – Checks if Plain Language is currently active.

  • EA.keepPlainActivated() – Ensures Plain Language remains active after a page change.

  • EA.scriptIsLoaded() – Checks if the script was successfully loaded.

These functions help you integrate Plain Language flexibly into your website and customize it to your interface.