How to Add One-Click Login With Google in WordPress

Do you want to add one-click login with Google to your WordPress site?

When your users can sign in with their Google account, they won’t have to create, remember, or track another username and password just to access your website. This helps save them time and increase your conversion rates.

In this article, we will share how to easily add one-click Google login in WordPress.

Why Add One-Click Google Login in WordPress?

Many internet users stay logged in to their Google accounts. This lets them quickly access Google apps like Gmail, Drive, and Docs without signing in separately for each app.

Having one-click Google login activated on your WordPress login page allows your users to do the same on your website. They can save time by quickly signing in with their Google account. This saves them from having to enter their login credentials each time.

If you run a simple WordPress blog, then you might not find this feature useful.

But if your organization uses Google Workspace for professional business email addresses, then your team members can use your organization’s Google apps accounts for login.

Also, a single sign-on feature like one-click Google login is very helpful for any websites that require users to log in such as multi-author websites, membership websites, and websites selling online courses.

With that being said, let’s take a look at how to easily add one-click login with Google to your WordPress website.

Tip: To add one-click Google Login, your site needs to have secure SSL encryption. To learn how to set up a secure connection, see our beginner’s guide on how to switch from HTTP to HTTPS in WordPress.

How to Add One-Click Google Login in WordPress

First, you’ll need to install and activate the Nextend Social Login and Register plugin. For more details, please see our beginner’s guide on how to install a WordPress plugin.

For this tutorial, we’ll use the free plugin that supports Google, Twitter, and Facebook login. There is also a paid version of Nextend Social Login that adds social login for lots of different sites including PayPal, Slack, and TikTok.

Upon activation, you need to go to Settings » Nextend Social Login in the WordPress admin area. On this screen, you see the different social login options that are available.

To add a Google login to your WordPress website, you need to click the ‘Getting Started’ button under the Google logo.

Here you will see that your first step will be to create a Google app.

Creating a Google app sounds technical, but don’t worry.

You don’t need to know any code, and we’ll walk you through all the steps.

Creating a Google App

To create this app, you’ll need to switch between your WordPress dashboard and the Google Developers Console. It’s a good idea to leave your WordPress dashboard open in the current tab and open a new browser tab.

Now you can visit the Google Developers Console website. If you are not already logged in, then you will be asked to log in with your Google account.

Next, you need to click on ‘Select a project’ from the top menu. It will open a popup where you would click the ‘New Project’ button to continue.

This will open the New Project page. You will need to add a project name and select the location. The project name can be anything you like, such as ‘Google Login.’

If you logged in using a Google Workspace account, then the location will be filled in with the name of your organization automatically. If not, then you should leave it as ‘No organization.’

Next, click the ‘Create’ button to continue.

You’ll now be redirected to the ‘APIs & Services’ dashboard. On this page, you need to click on ‘OAuth consent screen’ in the left menu.

Here you choose the type of user you’re allowing to log in.

Select ‘Internal’ if only users with your organization’s Google account will be logging in. Alternatively, you should choose ‘External’ if your users have email addresses outside of your organization. For example, anyone with an @gmail.com account versus an @yourcompanyemail.com address.

When you’re ready to continue, click the ‘Create’ button. Now you can start to add information about your app.

First, you should enter your business name in the app name field. This will be shown to the user when logging in, such as, ‘Smith Training Services wants access to your Google account.’

You also need to add the email address you logged into Google with. This will allow your users to ask questions about the Google login screen.

Tip: We recommend that you do not upload a logo for your app. If you do, then your app will need to go through a verification process with the Google Trust and Safety Team. This process is lengthy and can take 4-6 weeks.

Once you’ve done that, scroll down to the ‘App domain’ section. Here you need to add links to your website’s home page, privacy policy page, and terms of service page.

Then you need to click the ‘Add Domain’ button to add your website’s domain name, such as ‘example.com.’

If you want to add one-click Google login to more than one website, then you can click the ‘+ Add Domain’ button to add another domain.

Finally, you need to add one or more email addresses so that Google can notify you about any changes to your project.

When you’re finished, make sure you click the ‘Save and Continue’ button.

Next, you will come to the Scopes and Test Users pages. For both of these pages, simply scroll to the bottom and click the ‘Save and Continue’ button.

The final page for this step will show you a summary of your OAuth consent screen settings.

The next job is to create the keys your plugin will need to connect with Google Cloud.

You should click ‘Credentials’ from the left menu and then click the ‘+ Create Credientials’ button at the top of the screen. You need to select the ‘OAuth client ID’ option.

This will take you to the ‘Create OAuth client ID’ page.

You should select ‘Web application’ from the ‘Application type’ dropdown.

Some settings will be added to the page. You need to scroll down to the ‘Authorized redirect URIs’ section and click the ‘+ Add URI’ button.

Now you should enter this URL:

http://example.com/wp-login.php?loginSocial=google

Make sure you replace example.com with your own website’s address.

Once you’ve done that, you should click the ‘Create’ button to store the setting. It may take five minutes to a few hours for the setting to take effect.

Your OAuth client has now been created!

You will see a popup containing ‘Your Client ID’ and Your Client Secret.’ You will need to paste these keys into the plugin’s settings page back in your WordPress admin area.

You can just click the ‘copy’ icon to the right to copy the keys one at a time.

Adding Your Google Keys to Your Plugin

Now, simply switch back to your website’s browser tab and click on the ‘Settings’ tab under Settings » Nextend Social Login. Here you will see fields for the Client ID and Client Secret.

You need to copy your keys from the Google Cloud Console and paste them into these fields.

Once you’ve done that, make sure you click the ‘Save Changes’ button to store your settings.

Now you’ll need to test that the settings are working correctly. This is important because you don’t want real users to encounter errors when trying to log in to your website.

Simply click the ‘Verify Settings’ button and the plugin will make sure that the Google app you created is working correctly.

If you followed the steps above correctly, then you should see a notification saying ‘Works Fine – Disabled.’

You can now safely click the ‘Enable’ button to allow users to log in using their Google ID.

You will see a message confirming that Google login is now enabled.

Selecting Your Button Style and Labels

Nextend’s default button style and label are pretty standard and will work for most websites. However, you can customize them by clicking on the ‘Buttons’ tab at the top of the screen.

You will now see all the different styles that you can use for the social login button. To use a different style, simply click to select its radio button.

Once you’ve done that, you can also change the button text by editing the text in the ‘Login label’ field.

If you like, you can apply some basic formatting to the login label using HTML. For example, you can make text bold using <b> and </b> tags.

You can also edit the ‘Link label’ and ‘Unlink label’ fields that allow users to link and unlink your website with their Google accounts. Technical users can use HTML code for buttons to create their own Google login button.

Make sure you click the ‘Save Changes’ button to store your settings.

Taking Your Google App Out of Testing Mode

Now there is one last thing you need to do back on the Google Cloud browser tab. You should still see the popup with your client ID and client secret. You can dismiss the popup by clicking ‘OK’ at the bottom of the popup.

Now you need to click ‘OAuth consent screen’ from the left menu.

You can see that your Google app is in ‘Testing’ mode. This allows you to test your app with a limited number of users. Now that you have received a ‘Works Fine’ notification when verifying the settings with the plugin, you can move it to In ‘Production’ mode.

You do this by clicking the ‘Publish App’ button. Next, you will see a popup with the title ‘Push to production?’

Simply click ‘Confirm’ to allow everyone to use a one-step Google login on your site.

If you followed this tutorial carefully, then the Verification Status should now be ‘Verification not required.’

Your app will now work with all Google users.

Now when users are logging in to your website, they will have the option to log in with Google.

However, if they prefer, they can still log in using their standard WordPress username and password.

Keep in mind that users can only log in with the Google account address that they have used on your website. Also, if you have allowed user registration on your WordPress site, then users can quickly register on your site using one-click Google login.

If you wish to add the Google login button anywhere else on your website, then you can do so using a shortcode. You can learn more by clicking on Nextend’s ‘Usage’ tab.

We hope this article helped you learn how to add one-click login with Google in WordPress. You may also want to learn how to create a WordPress membership site, and see our list of the best WordPress business directory plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add One-Click Login With Google in WordPress first appeared on WPBeginner.

January 19, 2023 at 01:12AM

How to Create a HubSpot Form in WordPress

Are you looking to add a Hubspot form and add it to your WordPress site?

HubSpot is a popular all-in-one marketing platform designed to help grow your business used by over 113,925 people across the globe. Hubspot also enables you to create engaging forms for your website.

In this article, we will show you how to create a HubSpot in WordPress.

Why Use HubSpot to Create Forms

Hubspot is a marketing and sales platform that helps companies grow. It comes with numerous tools including a customer relationship manager (CRM), a content management system (CMS), built-in email marketing, and lead generation.

They also have a robust WordPress form builder, which seamlessly integrates with WordPress, allowing you to create hassle-free forms.

This form builder is an easy drag-and-drop builder that enables you to create interactive forms without a single line of code, making it one of the best contact form plugins.

Also keep in mind that HubSpot can also easily integrate with other form tools like WPForms, Formidable Forms, and more. With that being said, let’s see how you can create a HubSpot form in WordPress.

• Method 1. Creating a HubSpot Form Using The HubSpot Plugin
• Method 2. Creating a HubSpot Form Using WPForms

Method 1. Creating a HubSpot Form Using The HubSpot Plugin

You can easily create a HubSpot form for your WordPress website using the HubSpot plugin.

First, you need to install and activate the HubSpot plugin. For more details, see our guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item WordPress admin sidebar. Just click on HubSpot to be taken to the setup wizard where you can create a HubSpot account if you don’t already have one.

If you have an account, you need to click on the ‘Sign in here’ link at the top.

This will open up a ‘HubSpot Login’ popup.

Simply type your username and password and then click the ‘Login’ button.

After you’ve logged in, HubSpot will ask if you want to continue with the account you’ve just logged in with.

Simply click the ‘Continue With This Account’ button.

Then you’ll be asked to connect your HubSpot account with your WordPress website.

Just click on the ‘Connect Website’ button.

Once you’ve connected the WordPress website with your HubSpot account, head over to HubSpot » Forms from the WordPress admin dashboard.

This will take you to the ‘Forms’ page. Now, simply click on the ‘Create a Free Form’ button at the top right corner.

Next, you’ll have to select your form type and then click the ‘Next’ button on the top.

For this tutorial, we will be creating an ‘Embedded form.’

After that, you’ll be taken to the HubSpot template library.

Simply choose your preferred template, such as ‘Registration’ or Contact us.’ Then, just click the ‘Start’ button at the top.

Now that you’re on the Form Editor, you can edit the pre-made form template by dragging and dropping fields from the left into the preview at the right.

When you’re done customizing, click the ‘Submit’ button at the top.

This will open up a ‘Review And Publish’ popup.

Simply scroll down and click the ‘Publish’ button.

After you click the ‘Publish’ button, a popup will appear on your screen. As this is an Embedded form, a shortcode will be provided.

Now, just click the ‘Copy’ button beside the shortcode.

You can embed this code on any page where you want to add your HubSpot form. For more information, check out our guide on how to add shortcodes in WordPress.

Method 2. Creating a HubSpot Form Using WPForms

You can also create a HubSpot form using WPForms as this plugin comes with a HubSpot integration addon. WPForms is the most popular drag & drop WordPress form builder with over 5 million active installs.

Note that you need at least a WPForms Elite license to access the HubSpot addon.

The first thing you need to do is install and activate the WPForms plugin. Check out our guide on how to install a WordPress plugin for details.

Upon activation, go to WPForms » Addons from the admin dashboard. This will take you to the ‘WPForms Addons’ page.

Simply locate the HubSpot addon and click the ‘Upgrade Now’ button.

This will take you to your ‘WPForms Account’ page. Here, simply scroll down to the ‘HubSpot Addon’ and click the download button.

After that, you can install and activate the HubSpot addon the same way that you installed and activated the plugin.

Next, go to WPForms » Settings from the WordPress dashboard. Then, head over to the ‘Integrations’ tab.

Here you will find HubSpot in the list of integrations. Just click the arrow icon to expand the section, and then you can click the ‘Add New Account’ button.

A prompt will open up, asking you to connect with your HubSpot account. Simply type your HubSpot account login credentials.

If you don’t already have an account, then you can create one here.

Next, you’ll be asked if you want to continue with this account.

Simply click the ‘Continue With This Account’ button.

After that, you’ll be shown a popup asking you to connect WPForms with Hubspot.

Click on the ‘Connect App’ button at the bottom of the page.

On your WordPress dashboard, return to the ‘Integrations’ screen.

You should now see ‘Connected’ beside the section for HubSpot.

Now go to WPForms » Add New from the dashboard to create your HubSpot form.

First, select a form template from the WPForms template library.

After selecting the template, you’ll be taken to the WPForms interface where you can edit the form template.

Now, click on the ‘Marketing’ option on the menu bar to the left. Simply select ‘HubSpot’ from the list of integrations.

A HubSpot popup will then appear on the screen. Simply click the ‘Add New Connection’ button at the top.

WPForms will now prompt you to enter a connection nickname.

You’re free to choose any name you like, as no one will see this but you. Just click the ‘OK’ button when you’re done.

WPForms will then ask you to select your HubSpot account and choose an action to perform. Simply choose your account from the ‘Select Account’ Field.

Then choose the ‘Create/Update Contact’ option from the ‘Action to Perform’ field.

After selecting this option, various new settings will appear within the form.

Fill in those fields accordingly.

Next, you’re ready to customize your form in the form builder.

Simply create drag and drop fields from the left-hand side into the live preview on the right.

You can add any information that you want to collect and organize in your HubSpot account.

Once satisfied, click the ‘Embed’ button present at the top of the form builder.

This will open the ‘Embed in a Page’ prompt.

If you want to embed your HubSpot form on a new page, click the ‘Create New Page’ option.

To embed a form on an existing page, click the ‘Select Existing Page’ option.

After that, simply choose the right page from the dropdown that appears.

Now click the ‘Let’s Go’ button.

You will automatically be directed to the page that you selected from the dropdown menu. The HubSpot form will already be embedded there.

Simply click the ‘Publish’ button at the top of the content editor to push your new form live.

That’s it! We hope you learned how to create a HubSpot form in WordPress. You may also want to check out our ultimate guide on SEO for beginners and our expert picks of the best multipurpose themes to create an engaging site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a HubSpot Form in WordPress first appeared on WPBeginner.

January 18, 2023 at 04:54PM

How to Install Microsoft Clarity Analytics in WordPress

Are you looking to use Microsoft Clarity analytics on your WordPress website?

Microsoft Clarity is a free analytics tool that helps you analyze how users engage with your website with click tracking, scroll tracking, and heatmaps.

In this article, we’ll show you how to easily install Microsoft Clarity in WordPress, step by step.

This is what we’ll cover in this tutorial:

• What Is Microsoft Clarity and Why Use It?
• Microsoft Clarity vs Google Analytics: What’s the Difference?
• Signing Up for Microsoft Clarity
• Adding Microsoft Clarity Code to WordPress
• Using Microsoft Clarity
• Final Thoughts on Microsoft Clarity Analytics Tool

What Is Microsoft Clarity and Why Use It?

Microsoft Clarity is a free analytics tool for websites. It helps you see the most popular pages on your website and how users click, scroll, and interact with those pages.

The most important feature of Microsoft Clarity is its data visualization. This includes click tracking, heatmap reports, session recordings, and more.

Heatmaps show a visual report of how users move their mouse, as well as where they click, select, and scroll.

Similarly, session recordings help you see how users view your content, where they spend more time, and what takes them away from your WordPress website.

This information helps you create a better user experience for your users, improve performance, and boost sales conversion.

Note: Microsoft warns that Clarity should not be used on sites that contain sensitive data including user health care, financial services, or government-related information.

Microsoft Clarity vs Google Analytics: What’s the Difference?

Google Analytics is the best analytics solution on the market because it offers a lot of in-depth tracking features. Microsoft Clarity, on the other hand, focuses on the visualization of user interactions with heatmaps and session recordings.

Google Analytics helps you track almost anything on your website. It also has enhanced eCommerce tracking, conversion tracking, and detailed reports.

Microsoft Clarity is a newer platform, and it’s currently not an alternative to Google Analytics’ far superior features. However, you can use Microsoft Clarity alongside Google Analytics to unlock features like heatmaps and visitor session recordings because Google doesn’t offer those features yet.

Before Microsoft’s analytics feature, many website owners would use paid heatmap solutions like Hotjar or CrazyEgg alongside Google Analytics, but now you have a free alternative to those tools.

We recommend installing Google Analytics on all your websites. After that, you can follow our guide below to install Microsoft Clarity in WordPress.

They both work along quite well without affecting your website’s functionality.

It’s easy to add Microsoft Clarity to any website. You need to sign up for Microsoft Clarity and then add a tracking code to your website. We’ll take you through the process step by step.

Signing Up for Microsoft Clarity

First, head to the Microsoft Clarity website and click on the ‘Get Started’ button. You need a Microsoft, Facebook, or Google account to sign up.

After signing up, you will see the Clarity dashboard with a popup to add a new project.

Go ahead and enter a name for your project. You can use the name of your website to make it easily recognizable. Next, enter your website URL.

Once you’ve created your new project, you will be asked how you want to install Clarity. You should click the ‘Get tracking code’ option.

You will now see the tracking code that you need to add to your WordPress website. Simply click the ‘Copy to clipboard’ button.

Depending on the method you use to add this code to your WordPress site, you may need the complete tracking code, or just your project ID. You’ll find the project ID at the end of the tracking code, just before </script>. In the screenshot above, it is ‘ejbjp9k5ge’.

We recommend leaving this tab open or copying the code to a safe place. You will need it in the next step of this tutorial.

Adding Microsoft Clarity Code to WordPress Now you need to add the Microsoft Clarity tracking code to your WordPress website in a way that makes it present on all pages. Luckily, there are a number of easy ways to make this happen without manually editing any WordPress files.

You can choose your preferred method from the following three.

Method 1: Adding Microsoft Clarity Code Using the Microsoft Clarity Plugin

The first thing you need to do is install the Microsoft Clarity plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Clarity page in WordPress admin. Here you need to paste the project ID. That’s the last item in your Clarity tracking code and will look something like ‘ejbjp9k5ge’.

Make sure you click the ‘Save Changes’ button at the bottom to store your settings. Your WordPress site is now connected to Microsoft Clarity.

Method 2: Adding Microsoft Clarity Code Using WPCode

The safest and easiest way to add code to your website is WPCode, the best WordPress code snippets plugin. This plugin lets you add any script in your website’s header or footer right from your WordPress dashboard (no FTP or cPanel needed).

Once you have installed and activated the WPCode Free Plugin, you need to visit the Code Snippets » Header & Footer page. Once there, you should paste the entire Microsoft Clarity tracking code into the ‘Header’ field.

Don’t forget to click the ‘Save Changes’ button to store your settings.

The plugin will now automatically add the Microsoft Clarity analytics code to all pages of your WordPress site, so you can track website visitor activity on your website.

Method 3: Adding Microsoft Clarity Code Using All in One SEO

All in One SEO is the best WordPress SEO plugin that allows you to easily optimize your WordPress website for search engines and social media platforms. We show you how to get the most out of it in our guide on how to set up All in One SEO for WordPress correctly.

If you have All in One SEO installed on your website, then you can use it to add the Microsoft Clarity tracking code.

Simply head over to All in One SEO » General Settings » Webmaster Tools and click on the ‘Microsoft Clarity’ icon. A field will appear where you can paste your Clarity project ID. That’s the last item in your Clarity tracking code and will look something like ‘ejbjp9k5ge’.

Make sure you click the ‘Save Changes’ button afterward, and your WordPress site will be connected to Microsoft Clarity.

Pro Tip: If you’re using a WordPress caching plugin, then you need to clear your WordPress cache after you add the project ID or tracking code. This is important otherwise Microsoft will not be able to verify your site for a few hours.

Using Microsoft Clarity

Once you have installed the tracking code and cleared your WordPress cache, Microsoft will then start recording visitor session data.

However, it will likely take up to 2 hours before you can see any results in your Clarity account.

Using the Microsoft Clarity Dashboard

Simply log in to your Clarity account after a few hours, and you should be able to see the activity summary in your dashboard.

You can see useful insights like the percentage of sessions that have ‘dead clicks’. These are clicks that don’t go anywhere. For instance, users might be clicking on an image thinking that it’s a button or a link.

Another useful statistic is rage clicks when users rapidly click or tap in the same area. Paying close attention to these metrics can help you make your site more user-friendly.

The dashboard also shows you the number of ‘quick backs’. These occur when a user moves off a page and then very quickly comes back to it.

It also tracks excessive scrolling, when users scroll through a page more than expected. And like Google Analytics, Microsoft makes it easy to see the most popular pages on your site.

Using Microsoft Clarity Recordings

The ‘Recordings’ tab shows you recordings of different user sessions. You get the details of the user’s device, operating system, and country.

Clarity also tells you the number of pages they visited, the duration and time of their session, and the number of clicks they made.

The recordings let you watch an animation of mouse movements and clicks. In the screenshot above, you can see a user moved their mouse to the November archives link and clicked it.

Using Microsoft Clarity Heatmaps

The ‘Heatmaps’ tab shows you a heatmap of your website. These help you see which sections are popular on your site based on the number of people clicking.

The heatmap will also show you how far users scrolled down the page, and which areas on the page received the most clicks.

Final Thoughts on Microsoft Clarity Analytics Tool

Microsoft Clarity is a new analytics tool with some neat features. While it’s no alternative to the powerful Google Analytics platform, it definitely offers some interesting features like free heatmap and session recording.

Often new website owners want to see heatmaps and session recordings, but they don’t have the budget to purchase premium solutions like HotJar or CrazyEgg. Well, now you can use Microsoft Clarity.

Using the heatmaps and session recordings, you should be able to optimize your website or online store experience to improve user experience and boost sales.

We hope this article helped you learn how to install Microsoft Clarity Analytics in WordPress. You may also want to see our comparison of the best WordPress page builders to create custom layouts without any code, and our pick of the best email marketing services to grow your business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Install Microsoft Clarity Analytics in WordPress first appeared on WPBeginner.

January 18, 2023 at 12:43AM