# Ez Messages - Chat

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FFPyBXVadR0RslJNd2A8s%2FEz%20Messages.png?alt=media&#x26;token=c9af3c3d-369e-4b4a-a70c-71f245383509" alt=""><figcaption></figcaption></figure>

***

## 🔗Links

&#x20;      [**Template Link on Bubble Marketplace**](https://bubble.io/template/ez-messages---chat-1619514668490x457773934688862200)

&#x20;      [**Template Link on Our Website**](https://eazycode.com/template/ez-messages---chat-1692021501956x582429145264669040)

&#x20;      [**Preview Link**](https://watsaapppp.bubbleapps.io/)&#x20;

&#x20;      [**Forum Link**](https://forum.bubble.io/t/new-template-ez-starter-free-landing-page-template-by-ezcode/64896)

***

## Photos

{% tabs %}
{% tab title="1" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2F7KnDNFfEJuD6O6EMiU5z%2Fimage.png?alt=media&#x26;token=9c874c80-9ae7-477b-8495-fb86518d5910" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2F57rJ2lUIwj28sqva45d9%2Fimage.png?alt=media&#x26;token=755d3b25-8e20-4fda-aa96-320364bfd11d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="3" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fs0F4NMj1acRKUybLJ8kQ%2Fimage.png?alt=media&#x26;token=16b0e00a-9381-4d8f-a86d-c5644cb2dc52" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="4" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FgRwUrPRurDr4OxiUlCjF%2Fimage.png?alt=media&#x26;token=1006e220-48cd-4338-a07b-29326a3c30c9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="5" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FqLYhFnjIUbDYg3oyxUYZ%2Fimage.png?alt=media&#x26;token=cb833b0e-2490-4694-92f3-ee5b17355a6c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="6" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2F5FLn5UXzapbn7OXPjWc5%2Fimage.png?alt=media&#x26;token=55e9bcfa-e612-40d7-8431-110aae0ae2bc" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="7" %}

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FgaWRBi9Dgd3eC9UYsEMt%2Fimage.png?alt=media&#x26;token=0637b1b4-0f64-473b-b710-b08a1703f51c" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Introduction&#x20;

Are you looking for a revolutionary social template to help kick-start your online presence? Look no further than Ez Messages - Chat, the ultimate chat platform perfect for bringing people together and improving digital communication. This social website template brought to you by <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> is the missing piece of the puzzle for companies, individuals, or anyone looking to grow a community or network through messaging. Designed on the renowned bubble.io platform, this chat template is a reliable, user-friendly, and one-stop solution for all your social media needs.

Ez Messages - Chat is ideal for entrepreneurs, startups, social groups, or any organization that needs a dedicated chat service. It is equipped with features that allow you to redefine how you communicate with your audience. Our target clients who cannot afford to compromise on connectivity and seamless file sharing will find this template indispensable. Here's why you should invest in this chat template:

Features of our template that we would like to highlight:

* **Contacts**: Easily manage and access your contact list to stay connected with colleagues.
* **Chat**: Chat in real time and build relationships with your users.
* **My Groups**: Create and customize groups for targeted communication and collaboration.
* **My Chats**: Keep track of past conversations and never miss important discussions.
* **New Group**: Create new communities on your network with just a few clicks.

Our template is fully compatible and responsive across all device types. Our team has developed this template in line with up-to-date UX/UI design standards, providing an intuitive interface and visually pleasing aesthetics.

While we sell the template as is, we remain open to discussing additional modifications. Before purchasing the template, we recommend checking out the preview section. If you have any questions or require further clarification, please do not hesitate to contact us, and we'll be delighted to assist and tailor a solution to suit your needs.

***

## Features

* **Landing page**
* **Messages**
* **Contacts**
* **Chats**
* **My groups**
* **My chats**
* **New group**
* **Responsive design**

***

## Notes

{% hint style="info" %} <mark style="color:blue;">**Important note**</mark><mark style="color:blue;">:</mark> After purchasing this template and customizing it, be sure that you had a chance to learn how to set up data security.&#x20;

Check all privacy settings by the following link before launch: [*<mark style="color:blue;">**Bubble Privacy**</mark>* ](https://manual.bubble.io/help-guides/data/the-database/protecting-data-with-privacy-rules)

Since access to objects differs in each application and is unique for each case, ensure you have established all the privacy rules.
{% endhint %}

{% hint style="danger" %} <mark style="color:red;">This template is not the final product. Any part of the application can be modified for different needs.</mark>
{% endhint %}

***

## Pages&#x20;

### index

This page presents the features of this application. Also on this page, clients can find links to other <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> templates on this topic.&#x20;

### messages

This page displays a list of contacts and a chat window. Also, the user can create a group chat, divide the contact list into groups, and change his personal data.

### reset\_pw

This page allows the user to reset the password.

### 404

This page appears when something goes wrong in the app's work

### sign\_up

This is the Sign-In / Sign-Up page.

***

## Reusable elements

### Footer

This reusable element includes links to the <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> templates, socials, and personal web.

### Header

This reusable element includes the app navigation panel.

### Signup/Login Popup

This reusable element includes the Sign-In / Sign-Up form.

***

## Workflow

Highlighting the workflow with color is a great way to separate actions in essence and significance. Below is the <mark style="color:green;">Eazy</mark><mark style="color:red;">Code</mark> standard for the use of colors with a detailed explanation.

{% hint style="warning" %} <mark style="color:orange;">The standards below are for informational purposes only. Any discrepancy is not related to the functionality of the application.</mark>
{% endhint %}

**Blue** - The actions taking place on our screen do not utilize the application's resources. For instance, when an element is clicked and a popup is opened or closed.

<div align="center"><figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2Fa6ECFLHHyTqpr90FXSPb%2Fimage.png?alt=media&#x26;token=772855b5-5b7b-49aa-b99e-04701767624f" alt="" width="200"><figcaption></figcaption></figure></div>

**Green** - These actions involve creating or modifying entries in the database. For example, "Create a new Thing," "Make changes to a thing or a list of things," as well as "Copy a list of things," and so on.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FllvYT6zyLSb3QtkbzWj0%2Fimage.png?alt=media&#x26;token=65bc26ac-4a39-49ac-af76-56028f5bc333" alt="" width="200"><figcaption></figcaption></figure>

**Red** - This action involves deleting or resetting values. For instance, "Delete a thing or a list of things," as well as "Reset a group" and "Reset inputs."

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FctFJTDZVJYSxbjS2melb%2Fimage.png?alt=media&#x26;token=60d0a236-cca6-491b-88b6-a26f2311cc8c" alt="" width="200"><figcaption></figcaption></figure>

**Orange** - Actions related to your navigation. For example, "Navigate to a page," or "Do when a condition is true" – when you use specific values for checking, such as "When the current user is logged in," and so on.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2F7e8TWWOrsNOk3PttmqlN%2Fimage.png?alt=media&#x26;token=75cde6b5-e72b-4f75-a540-2507e1f92ed9" alt="" width="200"><figcaption></figcaption></figure>

**Cyan** - Actions utilizing Custom Events – lengthy tasks that involve the creation, modification, deletion, and plugins within a single comprehensive workflow as steps.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FygcvmFN64pIlShKKlsYH%2Fimage.png?alt=media&#x26;token=767513b2-cb61-4010-be33-cd4ff5967fad" alt="" width="200"><figcaption></figcaption></figure>

**Brown** - Custom workflow, API workflow, and similar tasks.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FIDdRjV71dqlcIXAsbOIV%2Fimage.png?alt=media&#x26;token=c76c2a04-b052-468b-b47c-efe04457d373" alt="" width="200"><figcaption></figcaption></figure>

**Purple** - The significance of this color is determined by the developer themselves, as it is done due to the fact that everyone has their own approach to development.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FQEZ73m2nAW9oTEAIFhDR%2Fimage.png?alt=media&#x26;token=007881d1-774f-40e0-84f2-557e3f60caa4" alt="" width="200"><figcaption></figcaption></figure>

**Grey** - All other actions.

<figure><img src="https://1427565863-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwuVpDcDmZQqJGW4nltd9%2Fuploads%2FUJj9aHsMG5LM8tZCMPLF%2Fimage.png?alt=media&#x26;token=eac4b920-8f7a-464e-bb6d-f1905009ad28" alt="test" width="201"><figcaption></figcaption></figure>

***

## Data Types

### Chat

This data type is used to store chat proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>Chat of Messages</code></td><td><code>List of</code> <a href="#message"><code>Messages</code></a></td><td>Stores the message data type.</td><td></td></tr><tr><td><code>Chat User</code></td><td><code>List of</code> <a href="#user"><code>Users</code></a></td><td>Stores the user data type.</td><td></td></tr><tr><td><code>group</code></td><td><code>yes/no</code></td><td>Stores the chat status(group or private).</td><td></td></tr><tr><td><code>image</code></td><td><code>image</code></td><td>Stores the chat image.</td><td></td></tr><tr><td><code>name</code></td><td><code>text</code></td><td>Stores the chat title.</td><td></td></tr></tbody></table>

### Message

This data type is used to store message proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>file</code></td><td><code>file</code></td><td>Stores the message attached file.</td><td></td></tr><tr><td><code>image</code></td><td><code>image</code></td><td>Stores the message attached image.</td><td></td></tr><tr><td><code>message chat</code></td><td><a href="#chat"><code>Chat</code></a></td><td>Stores the chat data type.</td><td></td></tr><tr><td><code>message content</code></td><td><code>text</code></td><td>Stores the message content.</td><td></td></tr><tr><td><code>seen</code></td><td><code>yes/no</code></td><td>Stores the message status(seen or not).</td><td></td></tr></tbody></table>

### People

This data type is used to store information group people's proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>text</code></td><td>Stores the client name.</td><td></td></tr><tr><td><code>photo</code></td><td><code>image</code></td><td>Stores the client image.</td><td></td></tr><tr><td><code>text</code></td><td><code>text</code></td><td>Stores the client review.</td><td></td></tr><tr><td><code>working</code></td><td><code>text</code></td><td>Stores the client working status.</td><td></td></tr></tbody></table>

### Solution

This data type is used to store aolution group proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>icon</code></td><td><code>image</code></td><td>Stores the solution icon.</td><td></td></tr><tr><td><code>text</code></td><td><code>text</code></td><td>Stores the solution content.</td><td></td></tr><tr><td><code>Title</code></td><td><code>text</code></td><td>Stores the solution title.</td><td></td></tr></tbody></table>

### User

This data type is used to store user proprieties.

<table data-full-width="false"><thead><tr><th>Field name</th><th>Type</th><th>Notes</th><th data-hidden>Notes</th></tr></thead><tbody><tr><td><code>chat joined</code></td><td><code>List of</code> <a href="#chat"><code>Chats</code></a></td><td>Stores the chat data type.</td><td></td></tr><tr><td><code>contact number</code></td><td><code>text</code></td><td>Stores the user contact number.</td><td></td></tr><tr><td><code>contacts</code></td><td><code>List of</code> <a href="#user"><code>Users</code></a></td><td>Stores the user data type.</td><td></td></tr><tr><td><code>name</code></td><td><code>text</code></td><td>Stores the user name.</td><td></td></tr><tr><td><code>photo</code></td><td><code>image</code></td><td>Stores the user photo.</td><td></td></tr></tbody></table>

***

## Option sets

### Faq Down

* 1
* 2
* 3

### Message-State

* user
* contacts
* settings
* new group
* group name

***

<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>

The template is sold as is, although additional modifications can be discussed. 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/>