Ghost Preview Setup Instruction
![Ghost Preview Setup Instruction](/content/images/size/w2000/2021/02/og-1.jpg)
Setup instructions for enabling preview for member-only content on Ghost, using Ghost Preview.
![](https://www.dingran.me/content/images/2021/02/image-17.png)
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
![](https://www.dingran.me/content/images/2021/02/image.png)
Give it a name, any name is OK, just so you remember what it is for
![](https://www.dingran.me/content/images/2021/02/image-1.png)
Get the admin key and url
![](https://www.dingran.me/content/images/2021/01/Screen-Shot-2021-01-24-at-5.08.34-PM.png)
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.
![](https://www.dingran.me/content/images/2021/02/image-12.png)
Fill in the form and click Create
![](https://www.dingran.me/content/images/2021/02/Screen-Shot-2021-02-14-at-10.59.26-AM-1.png)
Then your dashboard look like this
![](https://www.dingran.me/content/images/2021/02/image-14.png)
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
![](https://www.dingran.me/content/images/2021/02/image-15.png)
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.
![](https://www.dingran.me/content/images/2021/01/writing-posts-with-ghost.png)
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.