Advanced Interactive Plugin Customization

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

Search

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

0 Comments

Please sign in to leave a comment.