# Ez WebTour

## 🔗Links

       [**Plugin Link on Bubble Marketplace**](https://bubble.io/plugin/ez-web-tour-1699872292553x908542025324560400)

       [**Plugin Link on Our Website**](https://eazycode.com/one_plugin/ez-web-tour-1704795475417x194029579452106080)

       [**Demo Link**](https://eazycodedemo.bubbleapps.io/version-test/ez_web_flow)

       [**Bubble Editor**](https://bubble.io/page?type=page\&name=test_page\&id=eazycodedemo\&tab=tabs-1)

***

## Description

Ez WebTour is a user experience plugin designed to introduce new users to the features and functionality of a website or online platform. During the web tour, users are introduced to different sections or key elements of the interface, providing information on how to use certain features and get the most out of the available tools.

You can use our plugin as an onboarding strategy to help users quickly become familiar with your platform. This can increase user engagement, reduce learning curves, and improve overall user satisfaction by ensuring that users understand how to effectively use your app's features from the start.

***

{% hint style="info" %} <mark style="color:blue;">When You onboard Users from mobile devices (small Width), choose Placement "top" or "bottom", this will be the best way to show Popover</mark>
{% endhint %}

## Instructions&#x20;

#### Add Ez WebTour element from the Design Tab:&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/S3PbeWN7oYP-FuMGe6jC7YnJU5X124xr7_Sipi6nvxFtCmOVZikGESB2hQqhPKjyclTmoTtayPqyoQ5UpzlH93lqb1KvEFVoWElp2rhP_oJ7fRgPbWQhZ1H37oHpGM28uxYXYn4vI0bmZIlapL9NSNw" alt="" width="563"><figcaption></figcaption></figure>

#### Now Let’s specify the settings for Ez WebTour plugin:&#x20;

#### Enter Page Id: &#x20;

<figure><img src="https://lh7-us.googleusercontent.com/shw8fHcDUDPLxX5HOOlxgLWsSBLPg9wuMq2_G4JlZymumSW22CH0xeChuETAwyqjmhLH8TvsbaH9m-GKJE8ELNr-Xon-SxCBYsDZCWVwKWaYNii3O1rD6Qy0aeUWdingbMZUq-DhjOVkb6FrTr-CK5o" alt="" width="375"><figcaption></figcaption></figure>

#### You have set off Input Fields from the Main Settings Tab:&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/lIXinfzVQui77SB1g2b13lSTqDscM1JmE6pyrCvJFAEwy3H3zUcQYPth7uQGQF0-uwacXTGEZ3GZGfor6RHK6zoAhDfo0ZcVoV8IfBM1N3ZUxyOFYrVt3yTTvxU7Ea971d7EW_UmB7f6zGOGD5aKInM" alt="" width="375"><figcaption></figcaption></figure>

* **Offset** - Distance from popover to the target element.
* **Border Radius** - Popover border-radius.&#x20;
* **Allow Close** - Enable/ Disable to  Close on click outside.&#x20;
* **Highlight Offset** - Overlay offset from target element.&#x20;
* **Keyboard** - Enable/disable keyboard control.&#x20;
* **Width** - Specify the popover's width.&#x20;
* **Remove Arrow** - Show/hide popover arrow.&#x20;
* **Background** - Background Color for Popover.&#x20;

#### Settings for Title / Content:&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/6eh1twbZ5uI1HKb_D9U-Tr9mqcqQ7H6hvwI95XCZOUO6JR3XuwHXs7gUq2TAtxxodUtVGjc2ng-VaqOFfSnjWE60u3kphXnYafXa57D97C7eK4eLCpVXs3uJurrB2oyh6yxxKxobTtNlYn9kS8kk8cM" alt="" width="375"><figcaption></figcaption></figure>

#### Title and Content Settings are the same:&#x20;

* **Font Size** - Set the font size.
* **Font Color** -  Set the font color.
* **Font Family** - You can Use Common Font Families (ex. serif, fantasy, sansserif, monospace,  cursive)&#x20;

#### Settings for Buttons:&#x20;

<figure><img src="https://lh7-us.googleusercontent.com/sVQxCNwOm24bB-UwZ32R0nbWu0j6VU9lzit_wTjA2Plqu42wU-dv1lzfIEsGeWe5c6jUK0RHA-0hPFdDlgYQngmM96m9S1bPH-VjajRBs2blIFvVuTSLwJiMDdlgbk08VRjDX3tkepVnDU2crHX-XQM" alt="" width="375"><figcaption></figcaption></figure>

#### You can specify the Button style: &#x20;

* **Text Color** - Set the text color.
* **Background Color  -** Set the background color.

***

<div align="left"><figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FOmA8OIR6KMcPc4Kd8oZW%2Fimage.png?alt=media&#x26;token=d8d79fa2-356b-4dd7-a687-fc59b1c965b3" alt="" width="188"><figcaption></figcaption></figure></div>

Feel free to contact us for any inquiries and we’ll be happy to find a solution for your ideas – <http://eazycode.com/>

**Hire us:**

<img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FnhRM38XquaMB7rEGRZF5%2Fimage.png?alt=media&#x26;token=94debb70-7346-48cc-8e7a-ddac3b68cc70" alt="" data-size="line"> <https://www.fiverr.com/share/qQoDQZ>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FUnmo0SgqtdtObJcWnXKG%2Fimage.png?alt=media&#x26;token=84a44ee4-c963-4409-ab03-5e03da5f9917" alt="" data-size="line"> <https://www.upwork.com/freelancers/~01c1a4cbef44ecb5f1>\
\
**Follow us:**

<img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FY27NTLRLjxmS860b2LuF%2Fimage.png?alt=media&#x26;token=de978886-fe93-45d9-9aa2-dbe633c9c900" alt="" data-size="line"> <https://www.facebook.com/eazycode>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FJxNkIN1XL49rJ0d1PW4h%2Fimage.png?alt=media&#x26;token=6bc2d54b-741e-4327-895e-c9d256e29cfc" alt="" data-size="line"> <https://twitter.com/ezcode_official>  \ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FDIjJ2ERcrlmbdSWhRNBd%2Fimage.png?alt=media&#x26;token=0a8166ae-162e-4fcb-bef6-e458c760fee7" alt="" data-size="line"> <https://www.instagram.com/eazycodecom/>\ <img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2F0K22Xx5JDxzKfhXJkmSi%2Fimage.png?alt=media&#x26;token=90af72e3-5fcc-4ea2-baf6-56525f3e1e6a" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>