How to add Pricing Tables to a Shorthand story

Embed Pricing Tables on Shorthand in just a few steps

Embed Pricing Tables on Shorthand

01
Create a Pricing Tables widget for Shorthand On Common Ninja

First, create a Shorthand Pricing Tables widget on Common Ninja.

On the widgets catalog, find the Pricing Tables and enter the Editor.

Create a Pricing Tables widget for Shorthand On Common Ninja
02
Save the Pricing Tables widget

When you're done creating the Pricing Tables widget, click on the Save Changes button at the right top corner of the editor.

If you don't have an account on Common Ninja, you'll have to register first.

Save the Pricing Tables widget
03
Copy the Pricing Tables Embed Code

When you're ready to add the Pricing Tables widget to your Shorthand story, click the Add To Website button at the top bar of the Editor.

On the window that opens, click the Copy Icon to copy the widget embed code. In the next steps, you will paste this code into your Shorthand [site_type].

Copy the Pricing Tables Embed Code
04
Enter the JavaScript window

Now, let's head to your Shorthand Story editor.

You'll need to add a part of the Pricing Tables embed code you've copied, in the JavaScript window.

To do so, in the Shorthand editor, Click on the JavaScript button at the top bar (the JS icon).

Enter the JavaScript window
05
Adding a JavaScript code to the Shorthand Story

Past the Pricing Tables embed code you've copied before, in the JavaScript window.

Adding a JavaScript code to the Shorthand Story
06
Delete the second line of the code

Delete the second line of the code you added, leaving only the first line of the embed code.

Delete the second line of the code
07
Exist the JavaScript window

Click on the page, anywhere outside the JavaScript window, to close it.

If you're adding several widgets, you'll need to add the JavaScript line of code only once.

Exist the JavaScript window
08
Two methods of adding the Pricing Tables to Shorthand Story

There are two ways you can add the Pricing Tables to your Shorthand story, by adding it to an existing section or by adding a new section to the Story.

Two methods of adding the Pricing Tables to Shorthand Story
09
Adding the Pricing Tables to an existing section

To add the Pricing Tables to an existing section on your Story, click on the Insert HTML button in a section where you wish the Pricing Tables will show.

Adding the Pricing Tables to an existing section
10
Adding the Pricing Tables embed code

Now, in the Custom HTML window, simply paste the second line of the Pricing Tables embed code you've copied before.

Adding the Pricing Tables embed code
11
Save your changes

Click the Save Changes button at the bottom of the Custom HTML window to save your changes and close the window.

Please note: the Pricing Tables content will not show on the Shorthand editor, and will only appear on the preview and on the published story.

Save your changes
12
Method II: adding a new section

Another way to add the Pricing Tables to the Story is by adding a new section.

To add a new section, click on the Add Section button on the left panel, wherever you wish the Pricing Tables to show on the Story.

Method II: adding a new section
13
Select Custom HTML section type

Find and select the Custom HTML section at the bottom of the list.

Select Custom HTML section type
14
Add the Pricing Tables embed code

Now, in the Custom HTML window, simply paste the second line of the Pricing Tables embed code you've copied before.

Please note: the Pricing Tables content will not show on the Shorthand editor, and will only appear on the preview and on the published story.

Add the Pricing Tables embed code