Two spots. The connection code goes once, just before the closing </body> tag. The player is an empty box you paste where it should show. You do not write code around them.
One paste for the site - the connection code loads GSpeech on every page that uses that template.
One empty box - that is where the player appears. Click a card below to copy it.
WordPress too - the same paste works in the body. If you would rather not touch the theme, use Activate on WordPress.
Sign in. If the site is not in the dashboard yet, create a website first.
Open the site, then Integrations, then Html Website. Copy the connection code.
Paste that code in the shared page template, once, just before </body>. Save and publish the template.
Where the player should show, paste one empty box from the cards below.
In the widget, set Render Element to the same class as that box. For the full player that is .gsp_full_player.
Set the widget status to Published. Refresh the page and press play.
The player box
Copy the empty box
The box stays empty. GSpeech fills it. Pick one. Click the card to copy.
Full Page Player
<div class="gsp_full_player"></div>
Button Player
<div class="gsp_button_player"></div>
Circle Player
<div class="gsp_circle_player"></div>
What the player reads is Content Selector. For a first article, a simple target such as article is enough. The longer map, with classes and ids, is in the HTML guide.
FAQ
Embed FAQ
I cannot find a place to paste code
Look for the shared template, the file that wraps every page, and the line </body> near the bottom. Paste the connection code on the line above it. The empty player box goes in the page, where you want the listen button, not next to that script.
The box is there and the player is not
Render Element must match the box class, and the widget must be Published. Checklist: player not showing.
