- Getting Started with Ultimate Addons for Elementor
- Getting Started with Ultimate Addons for Elementor Pro
- How To Install The Ultimate Addons For Elementor Pro Plugin?
- How to Get License Key of Ultimate Addons for Elementor?
- How to activate Ultimate Addons for Elementor Pro license?
- How Can I Upgrade the License?
- How to Update Ultimate Addons for Elementor Plugin?
- How to update any plugin manually through FTP?
- About Beta Versions
- About Beta Versions
- How to Enable / Disable Widgets in UAE to Reduce Server Requests?
- How to White Label UAE?
- Getting Started with Ultimate Addons for Elementor Pro
- UAE Saved Sections
- How to create Google API key in Google Maps Widget of UAE?
- White Screen /500 Error After Plugin Installation
- How to Increase the Memory Limit of your site?
- Unable to see the Font Awesome 5 Icons in UAE’s widgets?
- Introducing User Registration Form Widget
- How to Create a User Registration Form using Elementor?
- How to Create a User Registration Form with Only Email Field in Elementor?
- Frequently Asked Questions about User Registration Forms
- Google reCAPTCHA v3 in User Registration Form for Elementor
- Honeypot field in User Registration Form for Elementor
- Filters/Actions for User Registration Form Widget
- How to Open a Modal Popup on the Click of an Elementor Widget?
- Modal Popup Widget
- How to Trigger a Modal Popup on the Click of a Menu Element?
- How To Close a Modal Popup on the Click of a Button or Text?
- How to Insert a Video in the UAE Modal Popup?
- What are the Various Options to Close a Modal Popup in UAE?
- How to Display a Modal Popup on Exit Intent?
- Modal Popup JS Triggers
- Woo – Products Widget
- How to display exact WooCommerce product with Query Builder?
- How to set Grid and Carousel layout for WooCommerce products?
- Filters/Actions for WooCommerce Products
- How to enable Quick View for WooCommerce Products?
- How to Exclude WooCommerce Products with Woo-Products Widget?
- How to Set Featured Products in WooCommerce?
- Woo – Products Carousel Does Not Display Correctly?
- How to Display Related Products with Woo-Products Widget?
- How To Add Rows And Columns to the Table?
- Table Widget
- How to add Table Header with Table Widget?
- How to add Table Content with Table Widget?
- How to add Sortable and Searchable Table? How to Show Entries Dropdown?
- How to Merge Columns and Rows in Table?
- How to Style the Table?
- Create Table by Uploading CSV
- Facing Issues with CSV Import?
- Image Gallery Widget
- How to Set Categories for Images?
- How to Add a Caption for the Image?
- How to Set a Custom Link for the Image?
- How to Design Filterable Image Gallery?
- How to Open a Webpage with the Click of an Image?
- How to Set Scale, Opacity, Effects, Overlay Color for Images?
- How to Display Specific Category Tab as a Default on Page Load?
- How to Set Icon on Image Hover?
- Video Gallery Widget
- How to Set Categories for Videos?
- How to Design Filterable Video Gallery?
- How to Display Specific Video Category Tab as a Default on Page Load?
- How to Set a Custom Placeholder Image for the Video?
- How to Set Overlay Color on the Video Thumbnail on Mouse Hover?
- How to Show Video Caption on Hover?
- How to Show Video Category on Hover?
- Bulk Editing for Video Category Names
- How to Style Particular Item / Icon?
- Timeline Widget
- How to Change the Vertical Position of Arrow & Icon?
- How to Set On-Scroll Color for Connector Line and Icon?
- How to Set the Alternate Alignment for the Card Content?
- How to Manage Timeline on Responsive View?
- How Query Builder Works for Post Timeline?
- How to Set Post as Sticky?
- Enable Infinite Load Pagination for Post Timeline
- Posts Widget
- How Query Builder Works for Posts Widget?
- How to Enable Infinite Load Pagination for Posts?
- Filters/Actions for Posts Widget
- Filterable Tabs for Posts Widget
- Layouts for Posts Widget
- Posts Widget Carousel Does Not Display Correctly?
- Displaying Portfolios in UAE Post Widget Using Custom Filters
How to Create a Google Client ID for Login Form Widget?
Login Form with a Social Login is a very widely used feature and with many users having an account on Google.
Using the Google Login for your website will only make the process of user onboarding and logging in easier than ever.
To add the Login Form widget of Elementor with an option of Google Login, you need to get the Google Client ID –
Firstly, you will need to drag and drop the Login Form widget on the page and enable the Social Login for Google from the Social Login tab of the widget.
Now you will need to follow these steps to create an app on the Google Console to use the Social Login –
Step 1: Setup the Project
- Visit and register your website on Google at https://console.developers.google.com/
- You will need to be logged in with your Google Credentials.
- If you don’t have a project yet, you will need to create one by clicking on the blue Create Project button on the right side. While if you already have a project click on the name of your project in the dashboard instead, which will open a modal and click on New Project.
- Click the Create Button
- Name your Project, and click on Create again on the top right corner of the modal.
- Once you have a Project you will end up in the Dashboard.
Step 2: Setup the Credentials
- Select the OAuth consent in the Dashboard below Credentials from the right sidebar!
- Let the default Application Type be Public. Enter a suitable name for your Application under the “Application name”, which will appear as the app asking for consent later on.
- Add relevant information in the below fields.
- Fill out the “Authorized domains” field with your domain name probably: your-site-url.com without any https in the beginning and subdomains in the end. Note: It’s a must that the
- Press Save and you will be redirected to the Credentials screen. Make sure all fields are filled out otherwise the Save button won’t work.
Step 3: Setup the OAuth credentials
- Redirected to the Consent screen click on the Create credentials button in the center of the page.
- It will open up a dropdown, select the OAuth Client ID.
- In the next screen, you will have multiple Application Type for the applications which use OAuth ID. You must select the Application Type as Web Application.
- You will see new options below, start with the Name of your Application.
- Add the Authorized JavaScript Origins which must be exactly your domain name. e.g. https://your-site-url.com without any subdomains.
- Add the relevant Authorized redirect URIs this must be the same which will be added to the Social Login widget’s Content Tab under the Additional Options > Redirect After Login.
- Now, click on the Create Button.
- A modal should pop up with your credentials. If it doesn’t open, go to the Credentials tab in the left-side bar and select your app by clicking on the name you entered. You will be able to copy the Client ID from here.
Paste the Google – Client ID under the WordPress Dashboard under Settings > UAE > Login Form – Google Client ID section. And you’ve set up the client ID for Social Login successfully.
If you want to add the Social Login for Facebook, visit the following link on How to Create a Facebook App ID for Login Form Widget?
We don't respond to the article feedback, we use it to improve our support content.