Advanced Interactive Plugin Customization

You can customize the look and feel of the interactive plugin with CSS.


The interactive plugin comes with a search field. Modify the CSS of the p3sdk-interactive-transcript-searchbox class to change how the search box looks and the CSS of the p3sdk-interactive-transcript-search-hit class to change how the results are displayed.

Word Tracking Options

There are three HTML classes used for word tracking with the interactive transcript. p3sdk-current-word highlights the current word as it is being spoken. p3sdk-tracked-words highlights the words in the current paragraph that have been spoken. p3sdk-tracked-paragraph highlights the previous paragraphs that have already been spoken. To use any of these features, simply apply a CSS style, such as a background color or a font color, to the class you wish to implement.

Please note that these styles can be used alone or together, but p3sdk-tracked-words overrides the behavior of p3sdk-tracked-paragraph.

Control Bar

Modify the control bar by changing the style of the class, p3sdk-interactive-transcript-control-bar. You can change the icons for keywords and download by changing the styles of p3sdk-fa-magic and p3sdk-fa-download.

Interactive Transcript

Change the look and feel of the interactive transcript by changing the class of p3sdk-interactive-transcript-content


Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk