Create Personalized Interactive Journeys
That Help People Navigate Complex Issues
Make Informed Decisions
(NO CODING REQUIRED)
Step 1. Create a new path (your project)
- Sign up for an account.
- After logging into your account, click on “Build a Path”:
- Click on “new path”:
- Give your path a name (the URL is created automatically) and click “begin”:
Step 2. Tour of the interface
Step 3. Add content to a slide
- Rename your slide (in this case, “factors to consider”) and click the edit button.
- This is your blank slide. Click edit to enter the editing interface:
- This is the edit interface:
Step 4. Change the slide's background color
- Click on “background color” to access the background color editor:
- Choose a color to change the slide color:
- The result:
- Each slide can be given a different color.
- Even if you want each slide to be the same color, you must select that color on each slide. There is no master slide color in this release.
Step 5. Add a background image on slide
- Click on the edit button to enter the content editing interface:
- Click on background image:
- Drag or upload image:
- Click on the image you just uploaded to selected it as the background. You should see a green checkmark on it:
- Click on “choose & close”:
- Each slide can be given a different background image.
- Even if you want each slide to have the same background image, you must select that image on each slide. There is no master background image in this release.
Step 6. Add text
- Click on edit on your slide:
- Click on “Content” to enter the interface in which you can add text, images, video, etc.:
- You should see the common WYSIWYG editor:
- Type and style as you would using any text editor:
- The result:
- The text is automatically centered vertically on the slide, but you can horizontally align it left, right or center.
Step 7. Add slides
- Return to the main interface by clicking on the name of your project:
- From the main interface, click on “add slide”:
- Rename your new slide. It is ready to be edited.
Step 8. Add an image
- From the main interface, select the slide to which you want to add an image (I named my slide “alone”):
- Click on edit:
- Click on content:
- In the WYSIWYG editor, click on the “add image” icon:
- Upload and select your image (make sure it has a green checkmark) and click on “select and close”:
- The result:
Step 9. Create a fork in the path
You asked a question, “Do you live alone or with others?”. You have to create a fork in the path based on the response. Here’s how you do that:
- In the main interface, click on the edit button for the slide that contains the question:
- Click on the edit icon:
- Click on “add fork link”:
- Click on “Create new fork” and give it a name (for example, “yes alone”). Then hit “choose & close”:
- Based on the background color, you may or may not see a button. But you can see the edit icon. Click that to style:
- Select a fill (the color of the button) for your button:
- Select a stroke (the border of your button) for your button:
- Select a text color and edit the text. Link your button using the pulldown menu to the correct slide and hit “save & close”:
- Repeat the previous steps to create a “no” fork. The result:
- Notice how two forks have been created in the main interface:
- We still have to add content by creating yes and no slides. Create and edit the yes and no slides to add content as shown in previous steps.
Step 10. Add Video
Adding video from YouTube or another video service is easy.
- From the slide edit interface, click on “content”:
- In the WYSIWYG editor, click on the “add video” icon:
- Grab the embed code from YouTube or another video service and enter it in the input box:
- Your video should appear. Hit “save and close”:
Step 11. View your path
You can view and engage with what you are building.
- From the main interface, click on view path.
- That’s it!
Step 12. Embed your path on your blog or website
You ready to share your PathChartr project with the world.
- Click on view path (step 11) and copy the link from the browser address window:
- Paste that link into the following embed code, replacing the text PATHCHARTR URL
<div data-pathchartr=”your URL here“></div>
This embed code will be responsive on most tablets, desktops and mobile devices:
Step 13. Adding a text underlay
You’re likely to have a background image on which the text color is difficult to see:
This is the time to add a text underlay:
- Let’s start by turning the text white in the content editor:
- Click edit, Add content, and then press the source code icon:
- The source code editor pops up:
- You can now add some simple inline css. Wrap the content under which you would like an overlay with the following inline styling:
<div style=”background-color: rgba(0,0,0,.65); width: 65%; padding: 10px;”>
- You can control the opacity by changing the number before the closing parenthesis to be between 0 (lightest) and 1 (darkets). In this case your source code will now read:
- When you hit ok, you will see:
- You can increase the padding till you are satisfied:
<div style=”background-color: rgba(0,0,0,.65); width: 65%; padding: 75px;“>