CHAT FLUTUANTE do WHATSAPP no Elementor sem plugins adicionais

Creating a Floating WhatsApp Button with Elementor

Introduction to the Tutorial

• The video introduces a tutorial on creating a unique floating WhatsApp button that opens a chat when clicked.

• The process is described as being completely native within Elementor, requiring no coding or additional plugins.

About the Presenter

• Marcelo Rocha, also known as Celão, aims to teach viewers how to create and sell professional websites, targeting an income of R$ 1,000 per month.

• Viewers are encouraged to follow him on social media for more insights and updates.

Prerequisites for Using Elementor Features

• The floating button feature is currently experimental and requires an updated version of both Elementor and Elementor Pro.

• If users do not have Elementor Pro, they can use an alternative plugin called proelements.org to access similar features.

Activating the Floating Button Feature

• To activate the floating button feature, navigate to Elementor settings and find the resources tab; ensure Flexbox Container is enabled.

• Users must check that their version of Elementor is up-to-date; if not visible in settings, it may be due to outdated software.

Configuring the Floating Button

• After activation, save changes and confirm that the feature is active by checking for a green indicator next to it in WordPress models.

• Once activated, users will see options for configuring floating buttons within their WordPress dashboard.

Creating Your First Floating Button

• Users can add new buttons by clicking "Add New" under floating buttons; various pre-designed templates are available for selection.

• The presenter demonstrates deleting an existing button before creating a new one from scratch using available templates.

Customizing Messaging Platforms for User Engagement

Selecting and Personalizing Platforms

• The customization process begins by selecting a messaging platform, such as Messenger or email. Users can explore how the interface appears on different platforms.

• WhatsApp is highlighted as a commonly used option; users must input their country code (DDI) followed by the area code (DDD) to set it up correctly.

Notification Settings and User Interaction

• A red dot indicator signifies notifications on WhatsApp, encouraging user engagement. Disabling this feature removes the notification prompt.

• Users can personalize the name and title displayed in the messaging interface, enhancing brand identity.

Profile Image and Message Customization

• Users can upload a profile image, with recommendations to use square images in web-friendly formats like WebP or AVIF for optimization.

• The typing animation feature adds visual engagement; disabling it results in direct message delivery without animation.

Active Status and Message Content

• An active status indicator (green dot under the profile image) shows when a user is online. This feature can be toggled on or off based on preference.

• Users can customize greeting messages to enhance interaction, such as asking how they can assist visitors.

Font and Button Customization

• Font styles (e.g., Rubik), sizes, and button text are customizable to align with branding preferences.

• As features are still in beta testing, users should expect potential bugs but generally find them stable for regular use.

Final Adjustments Before Publishing

How to Use Floating Buttons in Elementor

Introduction to the New Elementor Bar

• The speaker discusses using the new Elementor bar, highlighting differences from the old version. The publish button's location varies based on which bar is being used.

Adding Conditions for Floating Buttons

• The process of adding conditions for where floating buttons will appear on a website is explained. Users can choose to apply buttons site-wide or limit them to specific pages.

Selecting Specific Pages for Button Placement

• Users can select individual pages (e.g., a page named "exemplo") for button placement. This allows for targeted functionality rather than applying changes universally across all pages.

Excluding Specific Pages from Button Display

• It’s possible to include buttons on all pages while excluding certain ones by setting conditions. For example, a button can be applied site-wide except on a specific page like "exemplo de página."

Saving and Finalizing Changes

• After configuring the settings, users are instructed to save their changes. The speaker emphasizes that no additional coding or plugins are necessary, making it straightforward to implement interactive features directly within Elementor.

Conclusion and Further Learning Opportunities