Click to mail – Fancy Mailto UI chat bubbles WordPress plugin

Introduction

Are you looking for a way to add a touch of whimsy to your WordPress website's contact page or sidebar? Look no further than the Click to Mail - Fancy Mailto UI chat bubbles plugin! This nifty plugin allows you to replace traditional mailto links with stylish chat bubble icons that will make your website visitors click and chat with you in a heartbeat. In this tutorial, we'll take you through the step-by-step process of how to use the Click to Mail plugin, from installation to customization.

Installing the Click to Mail Plugin

1. Log in to your WordPress dashboard and navigate to the Plugins menu.
2. Click on "Add New" and search for "Click to Mail" in the search bar.
3. Select the Click to Mail plugin and click "Install Now".
4. Wait for the plugin to install and then click "Activate".
5. Once activated, click on the "Settings" link to configure the plugin.

Configuring the Click to Mail Plugin

1. In the plugin settings, you'll see a few options to customize the appearance of your chat bubbles:
   • Bubble Size: Adjust the size of the chat bubble icons from small to large.
   • Bubble Color: Choose from a variety of colors to match your website's theme.
   • Background Color: Select a background color for the chat bubble icons.
   • Text Color: Choose the color of the text inside the chat bubble.
2. Under the "Advanced" tab, you'll find additional options to customize the plugin's behavior:
   • Animate on Hover: Toggle on/off to animate the chat bubbles on hover.
   • Show/Hide: Choose to show/hide the chat bubbles on desktop/mobile devices.
   • Delay: Set a delay in seconds between showing/hiding the chat bubbles.

Using the Click to Mail Plugin

1. To use the Click to Mail plugin, simply add the following code to the "Text" or "HTML" widget on your WordPress page or post: [click-to-mail email="your-email@example.com"] Replace "your-email@example.com" with the email address you want to link to.
2. When a visitor clicks on the chat bubble icon, a popup will appear with a pre-filled email form addressed to your specified email address.

Customizing the Click to Mail Plugin

1. To customize the appearance of your chat bubble icons, you can add custom CSS code to your website's stylesheet.
2. Add the following code to your stylesheet to style the chat bubble icons:

   .click-to-mail {
   /* Your custom styles here */
   }

   For example, you can add a drop shadow effect to the chat bubble icons like this:

   .click-to-mail {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   }

3. To change the text inside the chat bubble, you can use the chat-bubble-text attribute in your [click-to-mail] shortcode. For example: [click-to-mail email="your-email@example.com" chat-bubble-text="Get in Touch!"]

Troubleshooting Common Issues

1. Chat Bubble Not Showing: Check if the chat bubble icon is properly displayed in the frontend of your website. If it's not showing, try refreshing the page or clearing browser cache.
2. Email Address Not Linking: Make sure you're using the correct email address in the shortcode. If the email address is not linking, check the plugin settings to ensure the email address is correct.
3. Custom CSS Not Applying: Check if the custom CSS code is properly applied to the chat bubble icons. If it's not applying, try using the browser's developer tools to inspect the CSS styles.

By following these simple steps, you'll be able to add the Click to Mail - Fancy Mailto UI chat bubbles plugin to your WordPress website and create a unique and engaging way to contact your visitors. Happy chatting!