How to customize the Immersive Reader button

This article demonstrates how to customize the button that launches the Immersive Reader, to fit the needs of your application.

Add the Immersive Reader button

The Immersive Reader SDK provides default styling for the button that launches the Immersive Reader. To enable this styling, use the immersive-reader-button class attribute.

<div class='immersive-reader-button'></div>

Customize the button style

To set the style of the button, use the data-button-style attribute. The allowed values are icon, text, and iconAndText. The default value is icon.

Icon button

Use the following code to render the icon button.

<div class='immersive-reader-button' data-button-style='icon'></div>

Text button

Use the following code to render the button text.

<div class='immersive-reader-button' data-button-style='text'></div>

Icon and text button

Use the following code to render both the button and the text.

<div class='immersive-reader-button' data-button-style='iconAndText'></div>

Customize the button text

To configure the language and the alt text for the button, use the data-locale attribute. The default language is English.

<div class='immersive-reader-button' data-locale='fr-FR'></div>

Customize the size of the icon

To configure the size of the Immersive Reader icon, use the data-icon-px-size attribute. This sets the size of the icon in pixels. The default size is 20 px.

<div class='immersive-reader-button' data-icon-px-size='50'></div>

Next step

Explore the Immersive Reader SDK reference