# Google Classroom {% embed url="" %} **Google Classroom** add-on is an additional feature created specifically to ease the process of structuring classes and your workflow. With a new function, you can connect your Google Classroom account with your website and import the needed classes. Students will get a special code to enter the right class.

{% hint style="info" %} To successfully use this feature, you need **PHP version 7.2** or higher. {% endhint %} ## How to get API Credentials Firstly, you need to create an app in the **Google Console** to get credentials. {% stepper %} {% step %} Follow to to open the Google Developers Console:

{% endstep %} {% step %} You can use the existing projects or create a new project to keep your console organized.

{% hint style="info" %} A new project can easily be created simply by providing its name. {% endhint %} {% endstep %} {% step %} On the Credentials page, click on the **Create Credentials** button.

{% endstep %} {% step %} From the dropdown menu, select the option **OAuth Client ID**.

{% endstep %} {% step %} On the opened page: * choose the application type as **Web Application**; * give a **name** to it (eg, *Google Classroom for MS LMS*) * click on the **Add URI** button on the **Authorized redirect URIs** section

{% endstep %} {% step %} Now we have to get the Redirect URI from MasterStudy LMS. Go back to the admin panel of your website, and follow **WP Dashboard > MS LMS > Addons > Google Classroom** and click on the :gear: gear icon. It opens the addon settings.

{% endstep %} {% step %} At the top of the opened page, you will find the Redirect URI Link. Kindly copy it:

{% endstep %} {% step %} Paste this link to the designated area and click on the **Create** button:

{% hint style="info" %} Usually, it will take several seconds to process. However, it may take 5 minutes to a few hours forthe settings to take effect {% endhint %} {% endstep %} {% step %} The following messages confirm that you have created the **OAuth Client** successfully. You can see the **Client ID** and **Secret key** here as well:

Later you can find this key in the same (Credentials) page by following this:

{% endstep %} {% step %} ### Download the JSON File Now we have to download the **JSON** file of our **OAuth Client**. Click on the **download** :arrow\_down: button to do it:

{% endstep %} {% step %} Now API for the Google Classroom service should be enabled. Find the Library menu on the **APIs & Services:**.

{% endstep %} {% step %} Using the search bar, search for the **Google Classroom** and choose it:

{% endstep %} {% step %} Click on the Enable button to enable it:

{% hint style="success" %} That's it. We have successfully obtained our working credentials to use for **Google Classroom.** {% endhint %} {% endstep %} {% endstepper %} ## Importing Google Classrooms Importing existing Google Classrooms is also a straightforward action. {% stepper %} {% step %} Follow **WP Dashboard > Classrooms> Import Classrooms** and upload the [**downloaded JSON file**](https://docs.stylemixthemes.com/masterstudy-lms/lms-pro-addons/google-classroom#download-the-json-file)**,** then click on the **Load Credentials** button:

{% endstep %} {% step %} Now, we need to get an access token. Click on the **Get Access Token** button. You will be offered to select the needed profile in the popup window. Sign in to move to your app and you will be redirected back to the **Import Classrooms** page.

{% endstep %} {% step %} Now you can see all the classes available in your Google account. You can import all classes or select just several and publish them.

{% endstep %} {% endstepper %} Once the classrooms are imported and published, you can see them on the Google Classroom Archive Page:

Students can find the course codes to enter the required class.

## Addon Settings You can find the addon settings in the [Imported Classrooms ](#user-content-fn-1)[^1]page:

* **Only signed-in students will see the code** - enable this option so that only students who are signed in will see the Google Classroom code ### Enabling Popup This setting lets you display a modal pop-up notice about the available Google Classrooms on your website when users visit. It occurs only on the first visit.

Here are the available settings: * **Popup Title** - provide a title for the pop-up. * **Popup Editor** - write down the brief description of the classrooms feature and describe why they are necessary. You can write whatever you want and design it using the special text editor. * **Popup Image** - indicate the image that will be used to display on the pop-up. Once the user clicks on the image, it brings users to the special page that you specified. * **Google Classrooms page** - indicate the URL of the page that users will be directed to by clicking the Pop-up Image. You can also use the link on the classes page on your Google Classroom account. ## Google Clasroom Elementor Widget You can customize the Google Classroom page using the special widget for Elementor. {% stepper %} {% step %} Open the page that you want to specify as a Google Classroom page using Elementor:

WP Dashborad > Pages > All Pages > Edit with Elementor

{% endstep %} {% step %} Search for '**Google Classrooms**' and add the widget to the desired place according to your needs:

{% endstep %} {% step %} You can provide the title for the Grid and indicate the number of the items (classes) that need to be displayed:

{% endstep %} {% step %} Once you are finished, you can publish/update the page:

{% endstep %} {% endstepper %} ## Google Classroom WP Backery Widget Similar to the [**Elementor widget**](#google-clasroom-elementor-widget), there is a special Google Classroom widget for WP Backery for users who prefer the WP Backery Page builder. {% stepper %} {% step %} Edit the page that you want to specify as a Google Classroom page with WP Backery, and click on **Add Element**:

{% endstep %} {% step %} Search for '**Google Classrooms**' and add it to your page:

{% endstep %} {% step %} You can provide the title for the widget and indicate the number of the items (classes) that need to be displayed, then update/publish the page:

{% endstep %} {% endstepper %} [^1]: WP Dashboard > Classrooms > Importeed Classrooms