# Make a clickable prototype with interactions

> Add interactions to WireframePro components to go to pages, open links, and show, hide or replace components, then click through the design in View mode.

Source: https://mockflow.com/docs/wireframepro-interactions

Interactions turn a set of wireframes into a clickable prototype. A **Confirm booking** button can take users to the **Booked** screen, a menu icon can show a side menu, and a tab can swap the content below it. Reviewers try the flow in View mode before anything is built.

![The Interactions panel for the Confirm booking button on a clinic app's Pick a time screen: On Mouse Click, Goto Page Booked, Slide In, with Highlight item on event and Add Action](https://assets.mockflow.com/docs/media/036711f48f834f3c8b377efbd2ccfc5b.webp)

## Add an interaction

1. Select a component, for example a button.
2. In its settings, under **Prototyping**, click **Manage Interactions**.
3. Click **Add Action**, then choose the event and the action, for example **On Mouse Click** and **Goto Page**.
4. Pick the target, such as the page to open, and an effect if you want one.

A component can have several actions, for example showing a message and then going to the next page.

## Events, actions and effects

- **Events:** **On Mouse Click**, **On Mouse Hover** and **On Mouse Out**.
- **Actions:** **Goto Page**, **Open URL**, **Scroll to Component**, **Show Component**, **Hide Component**, **Toggle Comp Visibility** and **Replace Component**.
- **Effects:** such as **Fade In**, **Slide In** and **Zoom In**, with delay, duration and direction settings.

Turn on **Highlight item on event** to outline the component when the event happens.

## Build screens that change in place

**Replace Component** swaps one component for another, for example a collapsed card for an expanded one, without leaving the page. To show only part of a page in View mode, select a group and set it as the **Primary container**: only that container and its children are visible in View mode, which is useful for phone prototypes built with Replace Component.

## Test the prototype in View mode

![In View mode, pressing Shift highlights the Confirm booking link, and clicking it opens the Booked screen](https://assets.mockflow.com/docs/media/1734786ea40b4a188885040acaf9e89c.webp)

Click **View** at the top. The design behaves like the finished product: click buttons and links to move between pages. Press Shift to highlight every link on the page. Share the project so reviewers can try it, as described in [Review and collaborate on a WireframePro project](/docs/wireframepro-review-and-collaborate).

## Next steps

- [Export a WireframePro project](/docs/export-a-wireframepro-project)
- [Turn wireframes into code with Build mode](/docs/wireframepro-build-mode)