Forem: Arize Nnonyelu

How to add a floating WhatsApp contact form to your WordPress website.

Arize Nnonyelu — Fri, 01 Nov 2024 22:18:51 +0000

Description

Add a floating WhatsApp contact form to your WordPress website and enable seamless communication with your customers. Being reachable shows gives a sense of reliability which is good for customer satisfaction. Using a traditional contact form or an AI chat bot can be frustrating which can make the customer loose interest in the process. With this simple contact form that sends data to WhatsApp, you can answer your customers on the go and they won't need to constantly check their email for your ticket updates. Suitable for individuals running a small business.

I recommend you use a special number that is not your private WA number.

Installation

arize99 / Floating-WordPress-to-WhatsApp-Contact-Form

Add a floating WhatsApp contact form to your WordPress website and enable seamless communication with your customers. This intuitive plugin allows visitors to send messages directly to your WhatsApp number.

Floating-WhatsApp-Contact-Form

Availability breeds reliability, and reliability drives customer satisfaction. Traditional contact forms and AI chatbots can be frustrating, causing customers to lose interest. Break the mold with our simple WhatsApp contact form.

Key Benefits:

Respond to customers on-the-go, no desk required
Eliminate email checking frustration for ticket updates
Enhance customer satisfaction through timely support
Ideal For Small business owners seeking personalized support solutions

Contributors: Arize Nnonyelu

Plugin Name: WhatsApp Contact Form

Tags: Floating Contact Form, Floating WhatsApp Contact Form, WhatsApp, WordPress to WhatsApp, WhatsApp Message from WordPress.

Author: Arize Nnonyelu

Requires at least: 4.0

Tested up to: 6.6.2

Stable tag: 1.0

Description

Reachability is good for customer satisfaction. Using a traditional contact form or an AI bot can be frustrating sometimes. With this simple contact form that sends data to WhatsApp, you can answer your customers on the go, and they won't need to constantly check their email for your…

View on GitHub

Go to the plugin repository 👆🏽 and download the latest release.
Install the plugin (your-website.com/wp-admin/plugins.php)
Add new Plugin > Upload Plugin > Locate the zip file and upload it.
Activate the Plugin
Go to WCF Settings and Change your number.

The WhatsApp logo should hover on your WordPress page and users can initiate contact directly from anywhere, this can be used to convert visitors to customers.

Here is a video demonstration of the process. 👇🏽

If you find this plugin useful, consider supporting its continued development and maintenance. Your support helps create more free tools for the community.

Introducing DevPub a playground for designers and developers built with Wix.

Arize Nnonyelu — Thu, 24 Oct 2024 10:26:37 +0000

This is a submission for the Wix Studio Challenge: Community Edition.

My Community Platform

Platform name: DevPub
Tagline: a playground for designers and developers.

Key features:

Forums: Discuss programming languages, frameworks, design trends, code reviews, and more.
Groups: Create and manage groups, and group posts.
Shop: Buy coffee mugs, t-shirts, and other everyday items from the shop.
Code Snippets: Share and reuse reusable code snippets.
Hackathons and Challenges: Participate in coding contests and design competitions.
File sharing: Users can share files with other users. You can check out more of the sites features.

Demo

DevPub

Development Journey

Velo APIs

I used the;

Animation Helpers API Adds popular animations to your site using the animation-helpers Velo package.
Low in Stock NotificationAPI Displays a notification when a store product is low in stock.

Wix Apps

Wix Forum
It lets you create communities, discuss, and drive traffic.
Wix Stores
With Wix Stores, you can create a professional eCommerce platform to sell online.
Wix File Share
A shared file library for your Wix site.
Wix Logo Maker
It helps you easily create logos for your website.
Wix Reviews
It helps you create simple & customizable reviews to boost sales.
Wix Member Area
It lets members manage accounts and access content.
Wix Checkout Requirements
It lets you set criteria for accepting orders in your store.
Wix Groups
This Wix app lets you host and manage monetizable online communities.

Thank you guys, you can use the General Discussions category to raise issues or suggestions while testing the forum or bettr drop a comment or reaction below.

How I made a Link sharing portfolio app using React

Arize Nnonyelu — Fri, 11 Oct 2024 17:44:12 +0000

This is a submission for the The Pinata Challenge

What I Built

I built a simple link-sharing portfolio. This app allows individuals to share links to their social accounts, or portfolios. The software can serve two purposes if you edit the code.

Demo

https://link-sharing-portfolio.vercel.app/

My Code

arize99 / link-sharing-portfolio

A simple portfolio react app that shares links and uploads a profile picture that integrates file uploads with Pinata’s Files API.

Link Sharing Portfolio

Description

Link Sharing Portfolio is a React-based web application that allows users to create a simple portfolio page with links to their GitHub, LinkedIn, and Twitter profiles. It also includes functionality to upload and display a profile photo using Pinata's IPFS storage.

Features

Input fields for GitHub, LinkedIn, and Twitter profile links
Profile photo upload functionality
Integration with Pinata's IPFS storage for photo hosting
Responsive design using Tailwind CSS

Prerequisites

Before you begin, ensure you have met the following requirements:

You have installed the latest version of Node.js and npm
You have a Pinata account and API keys (for photo upload functionality)

Installing Link Sharing Portfolio

To install Link Sharing Portfolio, follow these steps:

Clone the repository:

git clone https://github.com/yourusername/link-sharing-portfolio.git

Navigate to the project directory:
```
cd link-sharing-portfolio
```
Install the dependencies:
```
npm install
```

Configuring the Application

Create a .env file in the root directory of the project.
Add…

View on GitHub

More Details

I started by creating a Pinata account.

and I logged in afterward.

You can use Pinata for various purposes, but for this purpose, we want to use it as a dev so I went to API to get a new key.

I clicked the New Key button from the API page to create a new key.

I chose a name for the Key and gave admin permission so that I could have all the privileges.

You will be presented with an API Key, API Secret, and JWT Code...MAKE SURE THAT YOU COPY THEM INTO A SAFE AND SECURE PLACE IMMEDIATELY BECAUSE YOU WON'T BE ABLE TO VIEW THEM AGAIN!.

Click on DONE and start building. 🥳

Special thanks to @pinata for this challenge.This is the first challenge I am participating in on Dev.to.

Thank you guys.

How to make the search bar focus using JavaScript

Arize Nnonyelu — Mon, 25 Mar 2024 16:01:26 +0000

This is the process I took to create a similar search bar focus feature just like the one Google uses in Google and YouTube search bar and some other products.
This feature allows you to enter the search bar from anywhere on the screen just by hitting the forward-slash (/) button on your keyboard, you wouldn't need to scroll to the search bar and start clicking with your mouse to start searching.

This is how I did it;
I started by creating a simple HTML page adding a search bar tag and giving it an ID.

`<!DOCTYPE html>

Search Bar Focus

Yes, to make the code cleaner I put the JavaScript in a separate file.

`document.addEventListener('keydown', function(event) {
// Check if the key pressed is the one you want to trigger the focus
if (event.key === '/') { // Change '/' to the key you want to use
var searchInput = document.getElementById('searchInput');

// Select the text in the input field
searchInput.setSelectionRange(0, searchInput.value.length);

// Focus on the search input
searchInput.focus();

// Prevent the default action of the '/' key
event.preventDefault();

}
});`

I added comments to some places in the code just in case.

The result should look like this.
This is just basic HTML and JavaScript. This is the GitHub link in case you want to fork the repo or copy the codes and use them in your project.

It would be really exciting to have someone add a search icon and probably a mic icon on the right too, and adjust the position of the search bar.

https://github.com/arize99/search-bar-focus again in case you missed the repo. I hope to see what amazing projects you guys add this feature to.

How to become a pro-level developer by working on simple projects.

Arize Nnonyelu — Mon, 08 Jan 2024 13:11:04 +0000

It is very frustrating when you know the basics of your stacks but can't land a job or even be given a chance to join a team as an intern. After lots of years of experience in software development, learned that a lot of programmers don't get to that dream height because of their lack of active participation in their chosen stack.
A good way to tackle this is to keep an active participation in open-source projects. Yes, I understand that it can be discouraging to contribute to something and not get paid for it but that is the sacrifice you have to make as a software developer this is not something you have to spend hours on every day. Three hours or less daily is enough to grow your experience over time.
As we all know, the best way to grow is by working on a real project, but the challenge is that nobody wants a noob in their real project. I want to keep building simple projects that will give you the same level of experience as an industry professional. Yes, simple projects that touch almost everything that you will see when working on big projects.
How do you get started building your experience and staying active in them?
Throughout 2024, I am going to be starting industry-standard open-source projects on GitHub and making room for entry-level developers to come in, practice their skills, and grow on their experience.

Starting with A Weather App: This a simple project but upon completion, the contributors will gain experience in API integrations, experience in working with a team, and experience in the use of GitHub and basic Git operations. This is in addition to the development of their coding skills and active participation.

Hello, Software Engineers on X (formerly Twitter).

Let us keep an active coding skill. Contribute to this open source Weather App. I have started with the HTML, who will do the CSS? Who will do the JS?https://t.co/lsTdV7k9U7
💪🏽👨🏽‍💻

Let's go!
— South-East General (@upgrade1010) January 8, 2024