1. To add a new design to a Page, Blog Post, or Comment, open the Confluence editor and choose ProtoShare Design from the macros section of the insert menu:

2. The ProtoShare editor will appear within your Confluence window, showing a blank canvas and a new design named “Untitled”:

3. Add some components to your design, click the Save and Close button, and enter a design name when prompted. In this example we’ll add an image carousel from the ProtoShare stencil library and name the design “My Carousel”:

4. After clicking the Save button, the ProtoShare editor will be hidden and the Confluence content editor will be displayed. A placeholder for your new design will be shown in the editor.

5. At this point, you may want to view and test your design by using the Preview button on the bottom right editor toolbar. You can quickly toggle back and forth between preview and edit modes, and make revisions to your design without leaving the editor. Once you are satisfied, click the Save button and return to the page viewer.

6. Note that the placeholder defaults to the “Full Size” view. In this view your ProtoShare designs will be embedded directly in your Confluence page and maintain full interactivity. You may also choose the “Thumbnail” view, which will display a small preview of your design and allow other users to view the full design in a separate window.

7. After saving your changes in the Confluence editor, an HTML file containing your ProtoShare design will be uploaded and attached to your page or blog post. In addition to being displayed within Confluence via the ProtoShare editor macro, HTML design files created by ProtoShare can be downloaded and viewed in any web browser.

WARNING: If you delete the HTML design attachment associated with a ProtoShare macro, the macro will cease to function and will display an empty box.