How to build an installation tutorial

Creating Copy

1. Go through the installation steps and build your tutorial breaking it down into easy to follow steps. Each step should have a title and body describing the instructions in that step.
2. Create a general copy for each title and step. In the example below, a new general copy was created for every title and body.

*Important Note: Titles should be as descriptive as possible since they will appear in SEO and tutorial pages. Titles like "View Page" are too short and not very descriptive. Instead "Click VIEW to see your live InstaPage site"

If creating a tutorial with different versions (ie. theme install vs. page install), format general copies like: beaverbuilder_theme_title_1 beaverbuilder_page_body_1

Creating Images

1. Record a GIF for each step. GIPHY Capture is free and easy to use. Most of our tutorial GIFs were recorded with this.
2. Another free alternative is Gifox.
3. Save each GIF as beaverbuilder-step-1.gif, beaverbuilder-step-2.gif, etc.

Tips for using GIPHY CAPTURE:

• Enable Capture Cursor so viewers can see when/where you click in the GIF
• When recording your screen, make the width of your browser is as small as possible. This will decrease the total GIF size
• Try to keep the size of each GIF under 3 MB
• Keep the Pixel Size at Original and change Frame Rate to Low

3. Log into AWS (amazon web services) and go to the folder powr > tutorials > platforms and create a new folder with the platform name, lowercase, as one word (if more than 1 word in name)
4. Upload your saved GIFs into that folder
5. Make every GIF publicly viewable by selecting the GIF and clicking Actions > Make Public

Building in tutorial_configs

1. Go to https://www.powr.io/tutorial_configsand click New Tutorial config
2. Under Platform, add the platforms name lowercase, as one word
3. Remove anything in the Tutorial area and replace with:

{
  "create_first": true,
  "tutorial_content": [
    {
      "steps": [
        {
          tutorial step 1
        },
        {
          tutorial step 2
        }
      ]
    }
  ]
}

4. Each title/body in the tutorial will be encapsulated in { }. The example below shows step 1 of a tutorial.

{
    "embed": "script_and_div",
    "title": "{{{beaverbuilder_title_1}}}",
    "description": "{{{beaverbuilder_body_1}}}"
   },

This is the entire tutorial showing 4 steps:

{
  "create_first": true,
  "tutorial_content": [
    {
      "steps": [
        {
          "embed": "script_and_div",
          "title": "{{{beaverbuilder_title_1}}}",
          "description": "{{{beaverbuilder_body_1}}}"
        },
        {
          "image": "beaverbuilder/beaverbuilder-step-2.gif",
          "title": "{{{beaverbuilder_title_2}}}",
          "description": "{{{beaverbuilder_body_2}}}"
        },
        {
          "image": "beaverbuilder/beaverbuilder-step-3.gif",
          "title": "{{{beaverbuilder_title_3}}}",
          "description": "{{{beaverbuilder_body_3}}}"
        },
        {
          "image": "beaverbuilder/beaverbuilder-step-4.gif",
          "title": "{{{beaverbuilder_title_4}}}",
          "description": "{{{beaverbuilder_body_4}}}"
        }
      ]
    }
  ]
}

Each step will have it's own set of 'keys' which determine what will be shown in that step. title: The general copy key you created for this step's title description: The general copy key you created for this step's body image: A link to the GIF on AWS. Make sure to include platform folder name in the file path! ie. beaverbuilder/beaverbuilder-step-2.gif video: If using a video instead of GIF, use this key. Weebly tutorial is an example. buttonHref: Use to add a button. Various tutorials have referral buttons that link to a platform (ie. ePages) note: To add a note to tutorial. Squarespace has an example. embed: Determines which install code to show on tutorial. Options are

• "script"
• "div"
• "script_and_div"
• "shortcode"
• "iframe"
• "url"

At a minimum, every step should have a title and description.

Complex Tutorials

Some tutorials are more complex than others. For example, if a tutorial needs a switch between Theme install vs. Page install or if a different tutorial should be shown based on conditionals like app type or URL param.

1. For platforms that have a switch, use this the template below.

• The Page install steps will go in the top half, above "namespace: "pagePostOrTheme"
• The Theme install steps will go in the second half, above "namespace": "theme"

{
  "create_first": true,
  "tutorial_switch": {
    "title": "{{{page_or_theme}}}",
    "options": [
      {
        "selectionName": "pagePost",
        "selectionImage": "file-o",
        "selectionTitle": "{{{add_to_page_or_post}}}"
      },
      {
        "selectionName": "theme",
        "selectionImage": "magic",
        "selectionTitle": "{{{add_to_theme}}}"
      }
    ],
    "namespace": "pagePostOrTheme"
  },
  "tutorial_content": [
    {
      "steps": [
          steps for page install goes here
      ],
      "namespace": "pagePost"
    },
    {
      "steps": [
          steps for theme install goes here
      ],
      "namespace": "theme"
    }
  ]
}

2. Platforms like Wix that have different tutorials based on whether an app is available in an app market or not, you'll need to use a conditional for appTypeIncludes. Please see Wix config to see an example of a tutorial showing the conditional and listed app types.

Preview the tutorial and click save it.

Make it Active!

1. Go to https://www.powr.io/platforms and click New Platform

2. Enter the name exactly how it was entered into https://www.powr.io/tutorial_configs, lowercase as one word

3. Click Save

Steps to make sure the tutorial actually works.

• Make sure the tutorial looks good inside of standalone. https://www.powr.io/plugins/faq/standalone
  • Always can use the same link to standalone
  • Click "Add to Site" in top right, then click "Platforms" and search for the platform you added to see tutorial
• Make sure the steps appear on tutorial pages and look decent: https://www.powr.io/tutorials/how-to-add-form-builder-app-to-your-instapage-site?locale=en
  • Replace "instapage" in url with the name of your platform
  • Note: These pages are cached on cloudfront and may need to be cleared by an engineer if you are making updates.
• Get a REVIEW from 2 other people in the #teamtuts channel to confirm above 👍

Release Project Update

• https://www.powr.io/project_updates
• Create an POWr update for your platform completed with as many details as possible.
• Include JIRA task, if applicable

Web Hosting Tutorials

• Add domain privacy / WhoIs Guard to your site to prevent developers from bombarding your phone and email 🙃

How to message a site and request a free trial:

Hi [COMPANY] team!

I'm a developer with POWr.io, the web's leading plugin library, with 60 tools and 15M+ installs on site builders like Wix, Weebly, WordPress, Shopify and many others. I was looking into the possibility of adding our Plugins to [COMPANY].

As a first step, we would love access to a demo site. Would appreciate if you can point me in the right direction!

Best, [YOUR NAME]