How to Add WhatsApp / Telegram Group Join Buttons in WordPress

Step 1: Install the Ad Inserter Plugin 

Begin by installing the Ad Inserter plugin on your WordPress website. This versatile tool allows you to insert various elements, including buttons, into specific sections of your site.

Step 2: Copy and Paste the Integration Code

After installing Ad Inserter, copy the provided code and paste it into the designated section within the plugin settings. Before doing so, ensure you have the links to your WhatsApp and Telegram groups ready.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.group-card {
margin-bottom: 20px;
position: relative;
border: 2px solid transparent;
border-radius: 5px;
background: #f0f8ff;
display: flex;
align-items: center;
padding: 7px;
justify-content: space-between;
overflow: hidden;
}

@keyframes whatsapp-border-animation {
0% {
border-color: transparent;
}

50% {
border-color: #25d366;
}

100% {
border-color: transparent;
}
}

@keyframes telegram-border-animation {
0% {
border-color: transparent;
}

50% {
border-color: #004F7A;
}

100% {
border-color: transparent;
}
}

@keyframes facebook-border-animation {
0% {
border-color: transparent;
}

50% {
border-color: #E1306C;
}

100% {
border-color: transparent;
}
}

.seoquake-nofollow {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-weight: bold;
text-decoration: none;
padding: 5px 20px;
border-radius: 2px;
flex-shrink: 0;
transition: all 0.3s ease-in-out;
color: white !important;
}

.seoquake-nofollow i {
margin-right: 5px;
}

.whatsapp-card .seoquake-nofollow {
background: #25d366;
}

.telegram-card .seoquake-nofollow {
background: #004F7A;
}

.facebook-card .seoquake-nofollow {
background: #2311F3;
}

.seoquake-nofollow:hover {
transform: scale(1.05);
}
</style>

<div class="group-card telegram-card">
<span style="display: flex; align-items: center;"><i class="fab fa-telegram"
style="font-size:24px;color:#004F7A;"></i>
<span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Telegram Group</span>
</span>
<a class="seoquake-nofollow" href="Add_TELEGRAM_GROUP_LINK" rel="nofollow noopener noreferrer"
target="_blank">
<i class="fab fa-telegram"></i> Join Now
</a>
</div>

<div class="group-card whatsapp-card">
<span style="display: flex; align-items: center;"><i class="fab fa-whatsapp"
style="font-size:24px;color:#25d366;"></i>
<span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">WhatsApp Group</span>
</span>
<a class="seoquake-nofollow" href="ADD_WHATSAPP_GROUP_LINK" rel="nofollow noopener noreferrer"
target="_blank">
<i class="fab fa-whatsapp"></i> Join Now
</a>
</div>
<div class="group-card facebook-card">
<span style="display: flex; align-items: center;"><i class="fab fa-facebook"
style="font-size:24px;color:#2311F3;"></i>
<span style="font-weight: bold; margin-left: 10px; font-size: 0.9rem !important;">Facebook Group</span>
</span>
<a class="seoquake-nofollow" href="ADD_FACEBOOK_GROUP_LINK" rel="nofollow noopener noreferrer"
target="_blank">
<i class="fab fa-facebook"></i> Join Now
</a>
</div>

Remember to replace “ADD_WHATSAPP_GROUP_LINK” and “ADD_TELEGRAM_GROUP_LINK” and “ADD_FACEBOOK_GROUP_LINK” with the actual links to your respective groups. Also, make sure you have the appropriate button icons (whatsapp_button_icon.png and telegram_button_icon.png) uploaded to your website.

Step 3: Select the “Before Content” Option

In the Ad Inserter plugin settings, locate the “Before Content” option under the instruction settings. Choosing this option will display the WhatsApp and Telegram buttons immediately after your selected heading, ensuring visibility and user engagement.

Step 4: Customize for Optimal Results

To enhance the buttons effectiveness and seamlessly integrate them into your website design, customize their appearance. Experiment with different styles, colors, and placements to find the combination that resonates best with your audience.

Congratulations! You’ve successfully added WhatsApp and Telegram group join buttons to your WordPress site. Users can now effortlessly connect with your groups and participate in real-time discussions.

Conclusion: Elevate User Engagement with WhatsApp and Telegram Group Buttons

Integrating WhatsApp and Telegram group buttons can revolutionize user engagement on your WordPress website, extending its reach and driving conversions. By following the steps outlined in this guide and leveraging the Ad Inserter plugin, you can seamlessly integrate these buttons and cultivate a vibrant online community.

Don’t hesitate—take action today by adding join WhatsApp and Telegram group buttons to your WordPress site and unlock the full potential of instant communication with your audience!

Congratulations on successfully incorporating captivating WhatsApp and Telegram group buttons into your WordPress website, empowering visitors to connect and engage with your content on a deeper level.

Remember, these messaging platforms offer powerful tools for building community and facilitating real-time interactions. By leveraging them effectively, you can foster a thriving online community, enhance user engagement, and elevate your website’s performance.

Continue exploring innovative ways to leverage social media and messaging platforms to expand your website’s influence. Thank you for following this tutorial, and we’re here to assist if you have any questions or need further guidance. Leave a comment below, and stay tuned for more valuable tips and tutorials to optimize your WordPress website for success!

Also Read What is Power word or Positive or Negative Sentiment Word