Moqups App for Atlassian Confluence Cloud

With Moqups’ integration for Confluence Cloud, Atlassian customers can use the full spectrum of Moqups functionality – including Team and Project management – within the Atlassian ecosystem.

Moqups for Confluence Cloud works seamlessly with your current Moqups account. That means you can embed existing Moqups projects – or create new projects – within Confluence pages.

You can add a Moqups project to any Confluence page, build a dedicated page around a project, edit designs in-place, share projects between Confluence and Jira, and update content in realtime.

And, no matter where your team members create, embed, or edit their Moqups projects, the data automatically syncs between your Atlassian and Moqups accounts – eliminating back-and-forth, and providing an up-to-date, reliable source of truth.

Who can use this feature?

You can find out more about the Moqups for Confluence Cloud app on our Atlassian Marketplace listing.

The following article explains how to install and configure Moqups for Confluence Cloud (for Atlassian Administrators), and how to work with Moqups from within Confluence (for all Confluence users).

Install (Admin)

If you are the Administrator of a Confluence instance, follow the instructions below to install:

1. Go to Moqups for Confluence Cloud listing in the Atlassian Marketplace
2. Click the Get it now button in the upper right to open the Confluence Add-ons page
3. Click on the Install button
4. In the Confirm add-on installation window, click the Accept & install button
5. When the installation is complete, the Installed and ready to go! pop-up will appear
6. Click the Get started button to go to our Moqups Admin Panel

Configure (Admin)

Once you have installed Moqups for Confluence Cloud, you’ll need to configure the app by connecting your Confluence instance to a Moqups account. You do this from the Moqups Admin Panel. You will automatically be taken to this page after the installation is complete, but you can also find the page as follows:

1. Navigate to the left sidebar of your Confluence instance and click on Settings
2. In the new sidebar, scroll down to the Moqups section
3. Click on Settings to open the Moqups Admin Panel

Once you are on the Moqups Admin Panel page, you’ll need to activate the Moqups App by connecting your Confluence instance to a Moqups account.

1. If you don’t have a Moqups account, you will find a link at the bottom of the page that will take you to our website, and you can sign up from there.

   or

   If you already have a Moqups account, click on the Connect to an existing Moqups account button. You will be taken through the Connect process, and be given two choices:

   1. If there’s already a Moqups account associated with your Confluence admin email, Moqups will automatically identify that account and will offer to connect.

   2. You can also choose to connect to a different, existing Moqups account.

   

2. Continue with the login process

3. Click Done to finish the configuration process

Build a Confluence page around a Moqups project

You can build a Confluence page around an existing Moqups Project, or you can create a new project specifically for that page. In both cases, you begin the same way:

1. Go to a Space and choose Create in the Confluence sidebar
2. Select Moqups Project (scroll if necessary)
3. Click the Create button to open a Confluence page with a blank Moqups Project thumbnail
4. Double-click on the blank thumbnail to open the Add Moqups Project window
5. In the Add Moqups Project window, you can now choose to either:

• Create a new Project

  or

• Add an existing Project

• We explain both of these choices after the following GIF:

Create New Moqups Project from Within a Confluence page

To create a new Moqups project from within a Confluence page:

1. Click the Create New Project button to open the Moqups Project Created window
2. You can choose to replace the default Project Name with one of your own
3. Click the Edit Project button
4. You will automatically be redirected to the Moqups app where you will have full access to the Moqups features – and can start working on your project
5. The newly created project will be saved within your Confluence page – and in your Moqups account as well. Now, you can access the project from either your Confluence or your Moqups account, and all changes to the data will automatically sync between the two accounts.
6. When you are done working on your project, simply close the Moqups tab

Add an Existing Moqups Project to a Confluence Page

Once the Add Moqups Project Window opens, you’ll be able to browse through all the existing Moqups projects in your Moqups account; this includes projects created from within Confluence, as well as projects created – independent of Confluence – by your Moqups team. No matter what kind of project is listed in your Moqups account, it can quickly be attached from within Confluence!

To add an existing Moqups Project to Confluence:

1. Click on the thumbnail of the project that you wish to attach
2. Click the Add button
3. The project thumbnail will now appear within your Confluence page
4. If you want to view or edit the project, follow the instructions in the View or Edit Project section later in this article

Add Moqups Project to an Existing Confluence Page

There are three ways to add a Moqups Project to any type of Confluence page:

• Choose Moqups Project from the Insert dropdown
• Choose Moqups Project from Visuals & images in Other macros
• Use our integrated {moqups} macro

We’ll explain each of them below – but please note that you’ll need to be in your Confluence page’s ‘Edit’ mode in order to add a Moqups project.

Choose Moqups Project from the Insert Dropdown

1. Navigate to the Confluence Top Toolbar and click the Insert button
2. Choose Moqups Project from the dropdown and a Moqups Project will open

Choose Moqups Project from ‘Visuals & images’ in Other Macros

1. Navigate to the Confluence Top Toolbar and click the Insert button
2. Click on Other macros, select the Visuals & images tab, and then click on Moqups Project

Use our Integrated {Moqups} Macro

1. Type {mo
2. Choose Moqups Project from the dropdown and the app will open

No matter which of the above three methods you use to add a project to your page, you will be given the choice to either:

• Create a new Project

  or

• Add an existing Project

We explain both of these choices below:

Create New Project from Within Confluence Pages

To create a new Moqups project from within a Confluence page:

1. Click the Create New Project button to open the Moqups Project Created window
2. You can choose to replace the default Project Name with one of your own
3. Click the Edit Project button
4. You will automatically be redirected to the Moqups app where you will have full access to the Moqups features – and can start working on your project
5. The newly created project will be saved within your Confluence page – and in your Moqups account as well. Now, you can access the project from either your Confluence or your Moqups account, and all changes to the data will automatically sync between the two accounts.
6. When you are done working on your project, simply close the Moqups tab

Add an Existing Moqups Project to Confluence

Once the Add Moqups Project Window opens, you’ll be able to browse through all the existing Moqups projects in your Moqups account; this includes projects created from within Confluence, as well as projects created – independent of Confluence – by your Moqups team. No matter what kind of project is listed in your Moqups account, it can quickly be attached from within Confluence!

To add an existing Moqups Project to Confluence:

1. Click on the thumbnail of the project that you wish to attach
2. Click the Add button
3. The project thumbnail will now appear within your Confluence page
4. If you want to view or edit the project, follow the instructions in the View or Edit Project section later in this article

Set thumbnail

While you are in the Confluence page-edit mode, you can:

• Choose which Moqups Project page the thumbnail displays
• Choose the size of the Moqups Project thumbnail that’s displayed on the page
• Show a border around the Moqups Project thumbnail

Choose Which Moqups Project Page the Thumbnail Displays

1. Double-click on the project thumbnail to open the Edit Moqups Project Thumbnail window
2. Click on the Page Displayed button to select a page
3. Click Save to see the new thumbnail in place
4. Clicking on the thumbnail will now take you to the selected page of the project.

Choose the Size of Your Moqups Project Thumbnail

1. Double-click on the project thumbnail to open the Edit Moqups Project Thumbnail window
2. Choose a size for your thumbnail
3. Click Save, and then Publish, to see the new thumbnail size

Add or Remove Border from Around Moqups Project Thumbnail

1. Double-click on the project thumbnail to open the Edit Moqups Project Thumbnail window
2. Toggle the Show Border switch on or off
3. Click Save, and then Publish, to see the new thumbnail in place

View or edit project in Confluence

Navigate to the thumbnail of the Moqups Project you want to open and then:

• Click the Eye icon to open and view your project in preview mode\

  or

• Click the Pencil icon to open and edit your project

Disconnect Confluence Cloud from Moqups

You can manage your Confluence Cloud integration from the Accounts Page of your Dashboard.

To disconnect a Confluence Cloud instance from your Moqups account:

1. Open the Account Settings Menu in the lower-left corner of the Left Sidebar
2. Select Apps & Notifications from the Account Settings Menu
3. Scroll to the Atlassian Cloud Integrations section.
4. Click the Disconnect link to the right of the Confluence Cloud instance.
5. Confirm your choice by clicking the Disconnect Now button in the pop-up.