Ghost Preview Setup Instruction

Setup instructions for enabling preview for member-only content on Ghost, using Ghost Preview.

Overview
There are only 3 steps and should take less than 3 minutes.
- Create a Custom Integration in Settings > Integrations.
- Go to https://ghutils.dingran.me and add your site
- Add one line in Settings > Code Injection
That's it ๐
Below are detailed instructions with lots of screenshots. Feel free to contact me if you run into any issues.
Step1: Create a Custom Integration on your Ghost site

Give it a name, any name is OK, just so you remember what it is for

Get the admin key and url

Step2: Add Your Site to Ghost Preview
Now head over to Ghost Preview. Sign up with Google if you haven't, then go to Dashboard page and click Add Your First Site.

Fill in the form and click Create

Then your dashboard look like this

Step3: Add a Code Injection
The line of code you'll need is the following
<script src="https://ghutils.dingran.me/static/ghpreview.js" data-site="SITE-ID" defer></script>
Replace "SITE-ID" with your actual site id.
You can also get this directly by clicking your site name

Now go to your Ghost site Settings > Code Injection, and paste that line into Site Header.
That's it! ๐
To verify everything works, go to a private post and you should see something like this one. The first time might take 2 seconds, subsequent page loads will be much faster.

In case it didn't work...
Currently this tool doesn't support all the themes, but it is easy to add them, if you noticed this doesn't work for you, contact me ( ) and I can help sort it out ๐.
Optional: Customizing how much preview to show
There are two options you can use:
- Preview Ratio (default 0.4): it should be between 0.0 and 1.0 and is the primary parameter to control how much preview to show. 0.4 means preview will show 40% of the total post length.
- Max Length (default 10000): This is the maximum number of characters to show. The main reason we have this option is that a ratio-based preview might be too long for very long posts (thousands of words). This max length parameter will limit the preview to be at most this length.