# 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="/files/FWlRXstCc6xNIGrX5Eqb" 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="/files/4KPeHfCmX2d7zpd83cXF" alt="" data-size="line"> <https://www.fiverr.com/share/qQoDQZ>\ <img src="/files/h0wwtUMwvDod7FamBfIq" alt="" data-size="line"> <https://www.upwork.com/freelancers/~01c1a4cbef44ecb5f1>\
\
**Follow us:**

<img src="/files/67Q41mFR1z6nYwKvqJeJ" alt="" data-size="line"> <https://www.facebook.com/eazycode>\ <img src="/files/6MUa0InxwRzMoVStCu5q" alt="" data-size="line"> <https://twitter.com/ezcode_official>  \ <img src="/files/IUseXDC1i7zfvZcQgctx" alt="" data-size="line"> <https://www.instagram.com/eazycodecom/>\ <img src="/files/0dMeGeMKCjKSGW3RBP6P" alt="" data-size="line"> <https://www.linkedin.com/company/eazycodecom/>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eazycode.com/ezcode-documentation/plugins/ez-webtour.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.