Ghost

This guide will teach you how to setup a Ghost Project, install the SpeechKit WordPress Plugin and use it.

Prerequisites

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:

image

Select Ghost

Select the Ghost Project type:

image

Enter Project information

Enter your Project information:

image

Select language and voices

Select a language and then choose a voice to read the title and the body of the article:

image

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:

image

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.

image

Save your Project

Select Finish Setup to save the Project.

image
💡

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.

Troubleshooting

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 support@speechkit.io 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:

Option 1:

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 <script> tag.

Option 2:

Edit your 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 support@speechkit.io and we’ll provide a custom player embed script for your Ghost theme.