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>