This guide will teach you how to set up a Ghost Project, install the SpeechKit + Ghost Plugin.
You will need a SpeechKit account. Don't have one? Create one.
Select New Project
Log in to your SpeechKit account and select New Project in the top left menu:
Select the Ghost Project type:
Enter Project information
Enter your Project information:
Select language and voices
Select a language and then choose a voice to read the title and the body of the article:
Connect your Ghost publication to your SpeechKit project
SpeechKit will need access to your posts to convert them into audio.
To give SpeechKit access, login to your Ghost publication > Settings > Integrations > Add custom integration > name it “SpeechKit” > Press Save, then copy and paste the Admin API Key and API URL into the fields below:
Embed the audio player
SpeechKit will use a player embed script to add an audio player to each post with audio.
To do this, copy the script, login to your Ghost publication > Settings > Code Injection > Site Footer > paste the script into the Site Footer > Press Save.
Save your Project
Select Finish Setup to save the Project.
It is important that you press Finish Setup before you start creating posts with audio.
The SpeechKit Ghost Plugin should now be installed. New posts will be converted into audio and an audio player inserted below the article title.
The audio player is missing
It takes a short while to generate the audio, so after saving in Ghost allow a few minutes and then refresh your browser to see the player. If the player does not display after a few minutes then please send your Ghost site URL over to us at firstname.lastname@example.org and we’ll look into this for you.
The audio player displays, but it isn’t where you want it to be
To determine where the player will be placed in your Ghost Theme we inspect the HTML of the theme for some suitable HTML tags, element IDs and CSS class names.
This works for some Ghost Themes but, because there is no standard, it cannot work for all themes. If you would like to change where the player is positioned in your Ghost theme then there are 2 options to achieve this:
Edit the player embed script, adding a
data-container attribute for the desired location in the HTML. For example, if you’d like the player to be displayed in the div with the class name “post-content” then add
data-container=".post-content" into the player embed
post.hbs template, placing an empty
<div class="speechkit-container" /> where you would like to see the player.
Both of these methods are a little technical and require some basic web development knowledge. If you need some additional help positioning the player then simply send your Ghost site URL over to us at email@example.com and we’ll provide a custom player embed script for your Ghost theme.