React Multiple Select – Metronic Theme and React Hooks

This article introduces the React Multiple Select using React Hooks.

I have vendors in various cities who are providing service to their customers. The situation is I need to assign societies to vendors as per their preference. A vendor may provide service to multiple societies in an area.

For this, I used Metronic theme and React hooks – useEffect.

There is a list of vendors and now I want to assign societies to a particular vendor.

To do so I redirected to details of the vendor.

First, select a city, then an area and then I want a filtered list of societies from that area of the city.

 

React Multiple Select - Metronic Theme and React Hooks

Step 1 :
Fetched a list of cities using async-await with useEffect hook.

/* Get list of all Cities */

const apiUrl = API_ENDPOINT + “city_list/”;

useEffect(() => {

const fetchData = async () => {

const result = await axios(apiUrl).then(response => response.data)

.then((data) => {

setData(data.data);

let count = Object.keys(data.data).length;

setcount(count);

})

};

fetchData();

}, []);

/* End Get list of all Cities */

 

Step 2 :

Fetched a list of areas from the selected city using async-await with useEffect as —>

/* Get area list by City */

const apiUrlArea = API_ENDPOINT + “area_list/”;

useEffect(() => {

let postAreaData=”;

if(formdata.city_id && formdata.city_id !==”){

postAreaData = {city_id:formdata.city_id}

const fetchData = async () => {

const result = await axios.post(apiUrlArea,postAreaData).then(response => response.data)

.then((data) => {

setareadata(data.data);

})

};

fetchData();

}

},[formdata.city_id]);

/* End Get area list by City */

 

Here formdata contains details of the vendor to edit.

 

This code will get executed as we change City and we are able to get a list of all areas from the selected city.

 

Step 3 :

Now I have a city and area , I can get a list of all societies in that area.

/* Get Societies by City & Area */

const apiUrlGetSociety = API_ENDPOINT + “society_list”;

useEffect(() => {

let postCityAreaData = {

area_id:formdata.area_id,

city_id:formdata.city_id,

}

const temp_slist = [];

if(formdata.area_id && formdata.area_id!== ” && formdata.city_id && formdata.city_id!== ” ){

const fetchData = async () => {

const result = await axios.post(apiUrlGetSociety,postCityAreaData).then(response => response.data)

.then((data) => {

data.data.forEach(element => {

const obj_temp = {‘id’:element.id, ‘name’:element.name};

temp_slist.push(obj_temp);

});

 

setAllSocieties(temp_slist);

setShowLoading(false);

console.log(“allSocieties”);

console.log(temp_slist);

 

})

};

fetchData();

 

}

},[formdata.area_id,formdata.city_id]);

/* End Get Societies of Area */

 

Here I get a list of societies as an array of object – {id,name}

 

let  allSocieties = [ {“id”: 6,”name”: “Abhiruchi”}, {“id”: 2,”name”: “Sahara Society”}, {“id”: 3,”name”: “Satyam Society”},]

Now we have a filtered list of societies with respect to the area from the city.

Step 4 :

To show listing on form I used form-components from Metronics.

( https://keenthemes.com/metronic/preview/react/demo2/google-material/inputs/selects )

 

The Select component can handle multiple selections. It’s enabled with multiple property.

<FormControl className='form-control'>

<Select

multiple

name = “societies”

id = “societies”

value = { selectedSocieties }

onChange = { handleChange_multiple }

input = { <Input id=”select-multiple-chip” /> }

renderValue = { selected => (

<div className = {classes.chips}>

{ selected.map( s => {

const chipname = allSocieties.find(soc => soc.id === s);

return (chipname

?   <Chip

key={s}

label={chipname.name}

className={classes.chip}

data-aaa={JSON.stringify(allSocieties)}

/>

: ”)

})}

</div>

)}

MenuProps={MenuProps}

>

{ allSocieties.map((itemsociety) => (

<MenuItem

key={itemsociety.id}

value={itemsociety}

>

<Checkbox checked={selectedSocieties.includes(itemsociety.id) } />

<ListItemText primary={itemsociety.name} />

</MenuItem>

))}

</Select>

</FormControl>

 

In the above select component, we have passed selectedSocieties to value attribute.
selectedSocieties is an array of ids of societies which are already assigned to vendor.
I can get list of assigned societies to vendor as –>

 

useEffect(() => {

setShowLoading(true)

setformdata(props.data)

if(props.data.vendorSociety && props.data.vendorSociety !== ” && props.data.vendorSociety !== ‘undefined’ ){

props.data.vendorSociety.forEach(el => {

const obj = {‘id’:el.id, ‘name’:el.name};

temp_selected_slist.push(el.id);

})

setSelectedSocieties(temp_selected_slist);

 

}

}, [props.data]);

react multiple selection

After selecting one/more societies, handleChange_multiple event bind selected societies data to selectedSocieties . See the following code:

 

const handleChange_multiple = event =>{

 

let newitems = event.target.value.filter(t => typeof t !== ‘number’);

let changed = newitems[0].id;

let cleanthis = event.target.value.filter(t => typeof t === ‘number’);

newitems.forEach(i => cleanthis.push(i.id));

const newSelectedItems = selectedSocieties.includes(changed)

? selectedSocieties.filter(v => v !== changed)

: […selectedSocieties, changed];

setSelectedSocieties(newSelectedItems);

 

}

 

In the example given in Metronic , handleChange event deals with an array of the name only. In above we are dealing with an array of objects.
In the above code, in handleChange_multiple event, we get newly selected items as an object – newitems {id,name}. Then extract id from it and saved to changed. 

Now I can check with changed whether it exist in  selectedSocieties.

 

const newSelectedItems = selectedSocieties.includes(changed)

? selectedSocieties.filter(v => v !== changed)

: […selectedSocieties, changed];

setSelectedSocieties(newSelectedItems);

 

In above article , we learned how to use multiple select in combination with array of objects and obtain required results.

 

 

React JS Environment Setup and Component Creation

This article introduces the environment setup and how to create React component.

Overview of React JS

React is a JavaScript library for building interactive User Interfaces (UI’s) & it’s developed by Facebook in 2011. It follows the component-based approach which helps in building complex and reusable UI components.

Environment Setup
Tools required for ReactJS environment
1. Node.js
2. Visual Studio Code(Editor) / you can use any editor

Steps to Setup ReactJS Environment

To run the React application, NodeJS should be installed on our PC.
Then follow the below steps:

Step 1: Install NodeJS. You need to visit the official download link of NodeJS to download and install the latest version. Once we have set up NodeJS on our PC, the next thing we need to do is to set up React Boilerplate.

Step 2: Create a directory for React.js App:
using command –
mkdir ReactWorkspace

picture1

Step 3: Go to newly created ReactWorkspace directory location using command – see screenshot:

cd ReactWorkspace

Step 4: Setting up React Boilerplate.

We will install the boilerplate globally.

npm install –g create-react-app

Create a React Boilerplate using the above command – see screenshot.

-g represents the global installation type.

Step 5: After successfully installing a global react environment. Create react demo app using the following command:

create-react-app demoapp

The above statement will create a new directory named demoapp inside your current directory with a bunch of files needed to successfully run a React app.

Let’s have the look at the directory created by the above command:

In the following directory, you will see a number of files. The main files we will be working on within the basic course are index.html and index.js. The index.html file will have a div element with id = “root”, inside which everything will be rendered and all of our React code will be inside the index.js file.

Now, that we have successfully set up the development environment for React Js.

The last thing is to start the development server.

 

Step 6: To start the development server, go inside your current directory “demoapp” and execute the below command:

npm start

After successfully running the above command your compiler will show the below message on your screen:

And after starting our first React application, we will see the default screen on the browser.

Component creation in React Js:


            Components are the reusable peace of code for building blocks of any React application. It’s like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should display on the screen.

We have seen the default structure of the ReactJS application in step 5 second screenshot.

Create a new component file in /src folder-
I have created Welcome.js and add component code in that file-


import React from 'react';
class Welcome extends React.Component {
render() {
return (

Welcome to React Js

)
}
}
export default Welcome;

see the following screenshot:

And we need to add our newly created Welcome.js file into index.js to see it on the browser screen:

Now we can see the output on browser screen:

In the above article, we learned how to setup React JS Environment and create simple components.

Process of Understanding and Adapting to React Js

When I got to know that our company will be focusing on new technologies, I was excited and nervous at the same time. JavaScript is the language that is currently trending, so it was an obvious preference. We were using JavaScript but only in limited projects that are making the pages dynamic. There are many frameworks built-in JavaScript for both frontend and backend. Initially, it was finalized API will be built in Nodejs as it is widely used and very easy to understand and as it is widely used it is easy to develop and debug code. I found some useful tutorials for Express Js (Node Js framework) and it felt very easy to understand as we had experience in Laravel Framework (PHP framework). API for me was a straightforward task but the real fun began when we started with the frontend part. Initially, it was finalized to go with AngularJs (framework) as it is a widely used JavaScript framework but it was not straightforward to understand and many people had issues adapting the angular Js. And then we were introduced to React Js (we got tutorials from an expert as well).

So, after working on React Js for the last 4 months, I will put forward the blockers we had and also the interesting bits of React Js. many people confuse it as an Alternative framework to AngularJs but it is not. It is an open-source Library created and managed by Facebook. React Js can be integrated with any framework as it is the V of MVC that is, it just renders the code in the browser with the help of JSX. So, let’s start with the Advantage we felt of the React Js.

1) Easy to Use

Documentation is the key to any framework/library and the documentation for reacting is maintained very well and it’s easy to understand and move forward with. There are also many courses and tutorials available online which helps further.

2) Reusable Components

Components are used for managing the Html code which will be further rendered in the browser. A component has its own set of control and logic. Components can be nested with each other that further helps for reusability.

3) Virtual Dom

React Js uses a virtual DOM-based mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes individual DOM elements instead of reloading complete DOM every time

4) Benefit of JavaScript Library

React Js is used by most of the Developers thanks to its flexible nature, there are no specific parameters. Developers get a free license to manage the code as per their feasibility

Now every coin has two sides and React Js is no different. Adapting to React Js was not a tricky task but there were some blockers that we can consider as a disadvantage. The following are the Disadvantages listed below.

1) JSX is a barrier

React Js uses JSX which has a syntax similar to Html, but therein lies the problem. Any developer who has used Html finds it hard to adapt to the JSX due to its complexity.

2) V of MVC

React Js cannot be used as a stand-alone platform as it is wholly dependent on the other technology to manage the data. They are only the UI layers of the app and nothing else.

3) Hard to Adapt the Pace of its Development

React Js introduced hooks which help in reducing code Complexity and Reusability but for a newbie, it becomes hard to debug the code as all the previous code is not built around hooks. So in general developers have to always adapt to the changes being done in the library.

4) Documentation can be Maintained Better

As I mentioned above React Js is a very rapidly growing library but if we look at the documentation it does not provide adequate information on the new things introduced and the developers are left with trial and error for adapting to new things.

5) Not SEO Friendly

There are tools available to Render our Meta tags on the page but unfortunately, Facebook does not crawl through them and we are left with managing the Tags with some other Platform for the Particular Page.

Overall if we consider, React Js is the Present and the Future of JavaScript web development. It has its sets of Pros and Cons but to be honest it makes the process of Dynamic web development fun and easy thanks to its flexibility.

What are React Hooks?

React Hooks were introduced at React Conf October 2018, where two major functional
components were highlighted – useState and useEffect. Function compontents were initially known as functional stateless components (FSC), where they are finally able to
useState with React Hooks. Therefore, many people refer them as function
components.

Hooks let you “hook into” the underlying lifecycle and state changes of a component
within a functional component. More than that, they often also improve readability and
organization of your components. We can check 2 hooks that are used regularly while
using React Js.

1) useState:
import React from 'react';
function App() {
return (
<div>
<h1>0</h1>
<button>Change!</button>
</div>
);
}

In this above example, this is a simple functional component in which we can import our
first hooks useState for Handel state data.

import React, { useState } from 'react';
function App() {
const value = useState();
console.log(value);
return (
<div>
<h1>0</h1>
<button>Change!</button>
</div>
);}

If we run this code and console the data then we can get a response as below
> [null, ƒ()]
And if we add an argument into use state
const value = useState(true);
we can get a response as below
> [true, ƒ()]
Now we can access state value and render it in <h1> in our component such as


import React, { useState } from 'react';
function App() {
const value = useState(0);
console.log(value); // [0, ƒ()]
return (
<div>
<h1>{value[0]}</h1>
<button>Change!</button>
</div>
);
}

There are 2 types of functionality that store data into use state

1) Object destructuring
2) Array destructuring

Array destructing is almost the same, but uses square brackets [ ] instead of curly
braces { }.
Using array destructuring, we can get the initial value of state from the useState() hook.

import React, { useState } from 'react';
function App() {
// remember, there's a second item from the array that's missing here, but we'll come
right back to use it soon
const [count] = useState(0);
return (
<div>
<h1>{count}</h1>
<button>Change!</button>
</div>
);
}

Right now we can get initial state value but how we can change the value in hooks that
are described in the below example


function App() {
const [count, setCount] = useState(0);
function change() {
setCount(prevCount => prevCount + 1);
}
return (
<div>
<h1>{count}</h1>
<button onClick={change}>Change!</button>
</div>
);
}

Here we first set initial count to use state is 0 then for an update that
counts we can use onclick event listener on button click.
Remember that useState() hook returns an array with 2 members. The second
member is a function that updates the state!

2)useEffect

In class-based components, we needed to know the basics of lifecycle methods and which
method is perfect for different situations. useEffect hook simplified this situation. If you wish to
perform side effects, network request, manual DOM manipulation, event listeners or timeouts
and intervals.
useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react';

To make useEffect work, we pass it an anonymous function as an argument. Whenever React
re-renders this component, it will run the function we pass to useEffect

useEffect will run every time the component re-renders, and the component will re-render every
time the state is changed.
So if we write the following code, it will get us stuck in an infinite loop! This is a very common
gotcha with useEffect

If you want to call useEffect on some call function that also possible in react hooks.

Top Benefits Of Cross-Platform Mobile App Development

Frameworks like React have made it easier for top mobile app development companies in Pune, like CodePlateau, to develop cross-platform mobile applications that work on iOS, Android, and as a website. While there are, as you can imagine, innumerable benefits of cross-platform mobile app development for app development companies in India, as a client there are plenty of advantages for you as well. In this blog, we’ll take a look at why most cross-platform mobile app development companies are succeeding.

Advantages Of Cross-Platform Mobile App Development

1. Lower Costs: Before the advent of development frameworks like React, mobile app development companies needed to hire specialists in Android and iOS platforms who would then code for their respective platforms. These costs would pass on to the client who would have to pay more for similar work. Cross-platform mobile app development companies hire a coding specialist familiar with both iOS and Android and frameworks like React make it possible to use the same code with a few modifications on both platforms.

2. Codes Can Be Reused: Another excellent benefit for cross-platform mobile app development is that code from one platform can be reused for the next. Instead of having to write code from scratch for every platform, cross-platform mobile app development companies share code across platforms reducing redundancies and a lot of unnecessary manual coding.

3. Easier Prototype Builds: Before building a full-fledged app if a company would like to test out their product and the reaction to their idea in the market the most convenient solution is to build a prototype of the application. Cross-platform app development companies can use the tricks up their sleeve to build the prototype from zero to complete in just a matter of weeks thanks to the use of multiple feature libraries that are easily accessible for cross-platform mobile application development especially with react. The same code used on the prototype can be modified, if needed, to use on the main application when it comes time to go to the market.

4. Quicker Time To Market: Thanks to being able to reuse code, and using a single script across the platforms, cross-platform app development companies are able to deliver projects to their clients in half the time it would take otherwise. You can get from the idea stage of the app to the market in the shortest possible span of time. New features if the thought of by the product or marketing team based on the reaction to the application can be easily implemented into the app with minimal set-backs.

5. Consistency Across Platforms: Another significant advantage that cross-platform mobile applications have over their counterparts is the consistency achieved across platforms. When developing solely from Android and iOS special care needs to be taken to ensure the similarity of the look and feel of the application across the platforms but since cross-platform app development companies use frameworks like React the look and feel, and the experience users can have across the platforms are largely similar.

6. Easy Plug-In Access: There are plenty of extra features available for cross-platform app development companies that make building a fast, cost-effective, and fully functional application a piece of cake. The most common use is the use of plug-ins. Phone-Gap and Appcelerator are two such tools which can be used to implement plug-ins during cross-platform app development which helps in utilizing APIs across platform very efficiently. For instance, writing code in HTML5 and then re-coding them for different platforms can be a breeze when you’re using Appcelerator.

7. Helps Faster Marketing: Mobile Applications are a great way to reach your audience. The ability to build more applications that are useful to your customer can be a great source of marketing for your company and help with brand awareness much quicker than traditional marketing methods.

Conclusion

What cross-platform mobile app development companies are looking for are a lot of clients and the ability to do exciting work in their sphere and companies are looking for a mobile app development company that is able to do all the required work at the least cost and in the least amount of time. This is extremely convenient for cross-platform mobile app development companies but a lot of customers are not yet aware of this fact. If you’re looking for an affordable, cost-effective, functional app for both the android and iOS platforms, please get in touch with an expert at CodePlateau today.

Top 5 React Component Libraries for 2020

In our last blog we covered why, as one of the Top Mobile App Development Companies in India, we love using the React JS Framework to build mobile applications. One of the points we had mentioned was that there are a lot of React Component Libraries available that help builds better functioning applications. Today we’re going to looking at what the Top 5 React Component Libraries are for 2020.

Best React Component Library For 2020

  1. Rebass:

    One of the most important components of a mobile application is its user interface. Rebass is a UNI components library that is based on the Styled Systems Library and provides an excellent base to build powerful customizable UI components. What we love about Rebass is that you don’t have to start from scratch. There is plenty of code already written which you can adapt to your requirements. Another delightful addition about Rebass that the entire React JS Component library fits in 4KB. It’s been designed keeping mobile users in mind and has the design philosophy built into it.

 

  1. React Bootstrap :

    The original Bootstrap component library was a very powerful tool with a heady mix of CSS and JS files which made it easier to build UI components. The React Bootstrap Component Library does a good job of bridging the gap between the old and the new by enabling the power of React to the Bootstrap Library. You can do everything you could with the original Bootstrap, however, you will need to follow the React pattern.

 

  1. Ant-Design Component Library For React:

    While Rebass and React Bootstrap can be considered minimalistic libraries, Ant-Design takes the alternative route. It has over 50 customizable components that can be used to build stunning mobile apps. The tiny limitation you have to work with is that the design language has been set and you have to work within its framework. The design language created by the developers of the components library is just one of the many design philosophies that are available online so if you are okay with working within those limits then Ant-Design Styling React Components Library is everything you could ask for.

 

  1. Material UI:

    Material UI React Component Library is based on Google Material Design philosophy. All the latest Android Applications tend to follow the clean simple lines of the Material Theme which focuses on grids, cards, simple layouts, and responsive animations. You can always customize the design language to make it more to your liking and the documentation that is provided helps you do just that. To make sure you don’t have any problems using any of the multiple features packed in this component library the documentation is detailed and thorough. If you’re having trouble designing you can also pick from some really great free themes and work based on those projects.

 

  1. Grommet:

    If you’re a fan of mixing and matching styles to create the perfect hybrid of what you want then you’ll simply love the styling react components provided by Grommet. Grommet focuses on making design simple and providing a lot of accessibility features such as keyboard navigation and screen reader tags among others. If you’re not a design fiend that’s okay too. You don’t need to be an expert in design because Grommet provides you with a design kit and a complete icon set. It’s easy to install and run even for beginners who have just got into coding.

 

Conclusion

While the React Native Component Library is already pretty massive there are plenty to choose from you can also make use to tonnes of other libraries that can help you build the perfect frontend using the React Frontend Framework. If you’re looking to build an application that has the features you need and at a budget you can afford, please do get in touch with one of the best mobile app development companies in Pune, CodePlateau Technology services. We’ve worked with some of the best companies in the world across industries to help build an app that can help better support their customer-centric company vision. If this sounds like you then do get in touch today!

Top 5 Mobile App Development Companies in Pune

We’re almost into 2020, and the rapid pace of tech progression is astounding. Companies are looking for extraordinary solutions to bring their solutions to reality. Businesses are looking to improve their productivity and create multiple mediums of ensuring their brand recognition. One of the top ways of doing so is to be available on mobile which is high on the priority list for Google as well.

An affordable way of doing this is to invest in a good mobile application developed by one of the top mobile application development companies in India. Pune is fast becoming the hub of technology in India so we’re going to focus on the top mobile app development companies in Pune for this list.

Top Mobile App Development Companies in Pune

CodePlateau Technologies

Any list of the top app development companies in Pune would be incomplete without mentioning CodePlateau. With a strong work ethic and high professional standing, CodePlateau is one of the top recommended app development companies in India. THey’re listed on the top of the list due to their high work ethic, and the number of recommendations they receive in a year. If you look at their portfolio you’ll also see how much of their business is based on repeat business which easily tells you about the high level of customer satisfaction and engagement.

Their portfolio consists of numerous applications builts across a variety of industries for customers from all over the world. Not only do they possess expertise in app development, but they are highly sought after for their skills in UI and UX design as well. If you’re looking for the best of the best in mobile app development companies in Pune, you have to get in touch with CodePlateau Technologies.

CueLogic

While their forte lies in mobile app development for start-ups they also focus heavily on their skills in digital advertising, web development and more. They also focus on multiple industries such as healthcare, travel, entertainment, etc.

mPlusSoft

mPlussoft has the advantage of rising to the top mobile app development ranks because of its wide network of offices. They’re able to service clients from all over the world with their top mobile app development services. They rank at high on the list of client servicing and the company ethos established by their founders.

RedBytes Software

RedBytes is primarily known for providing a wonderful user experience for its clients through the apps they develop. They’ve fine-tuned the customer experience and are able to bring their ideas out to the real world through their applications. If there is anything negative that can be said about their services is the price which seems to be slightly on the higher end of the spectrum. But with over 300 apps on the PlayStore and iOS, they must be doing something right to please their clients.

OM Software

OM Software is partners with both Microsoft and Google so their credentials are not something to be taken lightly. They have been developing apps for well over a decade and the rich experience is very apparent in the work they do for their clients. A large credit to their success has to be the talented employees that work there and provide the impetus for the company to grow and succeed.

Conclusion

CodePlateau Technologies is the best mobile app development company in Pune by a long mile. Apart from mobile app development, the company has a whole host of services in the web domain that you can avail such as Web Design and Development, Digital Marketing, UI and UX design and more. If you’re looking for a partner that can help scale your business to new heights, then you should definitely get in touch with the team at CodePlateau.

Different Types of Google Ads Extensions

Google Ads extension is nothing but the extensions provided by Google to enhance the ads experience and simplify the business goals. These extensions provide extra information to the users and also give extra space to the advertisers. Also, they are available at no extra cost in the Ads section. Depending upon the needs Google is constantly updating the list of extensions. There are various and multiple extensions available currently, among them we will be discussing the top 7 extensions.

1. Sitelinks Extension

– This extension is specially designed to give focus on deep webpages. These can include categories, subcategories, about us, offer page, etc. Depending upon the requirement the pages can be set in the site link extensions. The page which is focused can also be tracked individually. So this helps to either create backlinks to that page or highlight it.

2. Call Extension

– Call Extension has a limit to only get viewed on a mobile phone. By using this extension people can call that business by just clicking on the phone icon made available by using the extension. This gives the user an effortless experience via the extension. The call is also trackable by the analytics.

3. Callout Extension

– This extension helps the marketers to showcase their unique point through it. Offer, deals, specialties can be focused that too without any extra charge. The text cannot be hyperlinked by any page, but are in simple text format.

4. Location Extension

– As the name specifies the nature of the extension. It is used to specify the location of the business which comes with the map icon. This location extension is clickable and when clicked on the mobile device it redirects to the map and directions are available.

5. App Extension

– This extension is limited to the mobile device only. If you are promoting your mobile application, this extension will help you to do so. When it is added to the ad, a CTA button is generated. After clicking the button, it redirects to the appropriate application downloading store, to download the app.

6. Price Extension

– This extension better helps the advertisers to display their products or services with a price tag. This is also beneficial as users can only click on the required product or service which gives more metrics about the users. The price tag box appears at the bottom of the ad with a maximum of 8 cards.

7. Structured Snippet Extension

– This extension helps to highlight the extra services, also provides three extra words space. In this section any brands, types of products, destination, multiple card offers, show timings, etc. can be focused. If used wisely this is the most useful extension.

Surely the list is long enough provided enough. DO share with me your favorites extensions in the comment section below. And for any professional Digital Marketing services, CodePlateau is the most reviewed and trustworthy name.

Basics of LinkedIn Marketing Strategies for B2B

LinkedIn has always been the favorite social media for the business to business platform. It’s known worldwide and by every marketer and business person that LinkedIn is the best option to generate leads for any business type. It’s not limited to B2B and for lead generation only, it also helps B2C business type for their brand awareness through it. Even after knowing the advantages of LinkedIn it becomes difficult or has no clue how to enter into this goldmine. Also what things or strategies to use which will help their business types to grow. So in this blog, we will discuss the tips and tricks which surely help to generate leads and spread awareness for the business.

1. Banner Image

– This is the first thing that is visible to the user when they land to your LinkedIn page. Have the image which is attractive and mentions the motive of your business easily. The banner image plays an important role, as it decides whether the user stays on the profile or not. A simple and attractive image is preferred then complex and hard to understand images.

2. Showcase Page

– This page feature is given by LinkedIn with some specific purpose. People can find all the required information about the company on that page. So, it’s important to update all the information and complete the profile on both the Company profile as well as the Showcase page.

3. Sharing is Engaging

– if you are growing its essential to showcase it. Sharing the content will keep the people engaged in your company or business. Now updated company page or showcase page will give an impression of non-activity to the new as well as old users. The more the content is shared more the user tends to like, share the content with others.

4. Sharing Content

– Sharing the content is fine, but what content is the main question which arises. On LinkedIn avoid sharing the personal content, instead opt for the professional shareable. This can be the blogs, webinars, seminars, events, etc. which will create interest in the users to engage with. You can also add the links of the website in the blogs and article which are shared on LinkedIn.

5. Engage Personally

– There are times when people interact with the company page in the form of messaging for any queries or suggestions. Try to interact with them and answer them. This created the bond between the individual and the company in a personal way. This is certainly a time taking process but the outcome is not going to disappoint.

6. Join Groups

– LinkedIn groups can give you a lot of benefits than anyone can think of if utilized properly. Groups are not created for any marketing purpose; this is missed by many marketers. Use the groups on a personal level to share and gain information and valuable tips to generate leads. Once you become an expert you can opt to create your own group.

This tip will surely help to generate the leads for the B2B business. And for an expert solution in social media, CodePlateau Technology is the most recommended name.

Tips To Improve Local SEO

There are many questions raised by most of when it comes to local SEO. As we are growing and connecting the people around the world, there comes up the question of local business. The current situation is like, its good to be globally recognized but local presence simultaneously holds the same importance even today.
Ranking local will not only be the stepping stones of your business but it also gives you a steady place between your competitor in the locals. Also due to Google’s trending keyword “near me” has changed the whole picture of the local business in the search engines. We will discuss the simple and impactful to your local business in terms of search engine optimization and branding.

1. Get Listing to Google Business

– For anything, people prefer search engines for any queries regarding anything. So it becomes important for every business to get their work online. Google provides business listing which provided the information in a well-defined way to the customers.

2. Google Maps

– Add the Google maps into your website which redirects to the maps app once clicked on the map. This gives the convenience to the user not searching for the address separately on the maps.

3. Multi-Location

– There are situations where your business has widespread along with multiple locations. Instead of targeting all the locations under on website try separating them. This will create the uniqueness of different locations and also help to rank well in those specific areas.

4. Optimize Business Profile

– Try to complete your business profile as much as possible. This will help new users to know about the services and products which are offered. Optimizing the profiles on regular intervals will help the user to keep updated about offers and deals too.

5. Google Virtual Tour

– Virtual tours attract users more towards the business. As it allows people to view your shops, restaurants, gallery, etc. in the actual way they are instead of imaging them.

6. Mobile Optimized Sites

– According to stats “Nearly 80% of internet usage is expected to have been mobile in 2018”. Mobile optimized websites load faster and are also responsive which fits in any device size.

7. Social Media

– For local business social media plays a vital role. Via social media, users can be updated on the current discounts, offers, deals, announcements, etc. Also, people react to the services and products through social media, where it can be utilized as organic marketing.

8. Local Listing

– Get listed in the local listing websites for that specific area and location. This will help the brand to grow locally and also increase the number of backlinks.

9. High-Quality Links

– Build and generate the high quality of the backlinks to the website. This will help the site to rank high on the search engines. Make sure that the generated links should be relevant and from high authority websites.

10. Customer Reviews

– Reviews from the customer play the most important role in the local business in terms of SEO. Types of reviews affect the ranking in the search engines, more positive review, users prefer going for those products or services rather than large negative reviews.

11. Reputation Management

– There are certain times when a business faces some difficulties and gain negative reviews. That time it becomes important to manage the reputation of the site. This is the time when reputation becomes mandatory.