# Interactions

The Interactions properties encapsulate all the different settings that will allow you to apply an unlimited scope of actions to a block when a user interacts using a specified trigger. 

{% hint style="info" %}
Cwicly Interactions can be thought of as visual scripting.
{% endhint %}

The Cwicly Interactions Panel allows you to: Copy, Paste, Reset or Save Globally your Interactions.

<details>

<summary>Open</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Navigate to General Settings
5. Click the Interactions property to open the Interactions Modal

</details>

<details>

<summary>Remove</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Navigate to General Settings
5. Click the Interactions property to open the Interactions Modal
6. Click **X** to remove

</details>

{% embed url="<https://www.youtube.com/watch?v=Olrgnkw_1Wk>" %}
TTD #11 - Interactions: Pricing
{% endembed %}

## Type

***Click***

***Double Click***

***Mouse Up***

***Mouse Down***

***Mouse Enter***

***Mouse Leave***

***Mouse Over***

***Mouse Out***

***URL Hash***

## Trigger

An Interaction can be by initiated by Click, Double Click, Mouse Up, Mouse Down, Mouse Enter, Mouse Leave, Mouse Over, Mouse Out or URL Hash.

{% content-ref url="interactions/trigger" %}
[trigger](https://docs.cwicly.com/interactions/interactions/trigger)
{% endcontent-ref %}

## Actions

Allows you to add triggers, targets, actions...

{% content-ref url="interactions/actions" %}
[actions](https://docs.cwicly.com/interactions/interactions/actions)
{% endcontent-ref %}

<details>

<summary>Add/Remove</summary>

1. Select a block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Navigate to General Settings
5. Click the Interactions property to open the Interactions Modal
6. Choose Trigger
7. Click **➕** to add an Interaction
8. Select desired target (Current, Selector)
9. If Selector, input required selector
10. Click ✎ (Edit) to open Interactions Modal)
11. Add required Class
12. Find Target
13. Select required target (Current, Selector, Includes, Parent, With Attribute, With Attribute Value)
14. Find Conditions
15. Select Required condition
16. Click ⌫ to remove

</details>