Integrate uTeach Cloud with LINE API

What is LINE?

If you’re reading this, it’s likely you know what LINE is, but here’s what wikipedia has to say:

Line (styled as LINE) is a freeware app for instant communications on electronic devices such as smartphonestablet computers, and personal computers. Line users exchange textsimages, video and audio, and conduct free VoIP conversations and video conferences.

Why use LINE?

There’s many ways to communicate with students, but in Japan and much of East Asia, LINE is one of the most universally adopted. Making student interaction with uTeach Cloud is one of our priorities, so we decided it would be good to be able to send notifications to an app most students are already actively using to increase their awareness. Many users have email, but especially in Japan, those might be cellphone emails which default-block non-cell phone messages or are otherwise not checked regularly by users.

Using LINE is a simple way to put your important notifications in front of the faces of your users.

LINE Integration: Overview

This isn’t the easiest thing to set up, but it’s not the most difficult either, so don’t worry.

Here are the main steps:

  • Set up a line channel
  • Input the Messaging API information on LINE
  • Input the necessary information on uTeach Cloud
  • Set up line channel for Login with LINE
  • Input respective information again

Voila! You’re ready to go. Sound difficult? Don’t worry, we’ll guide you through it.

Step 1: Set up a LINE Channel

Okay, so the first thing we want to do is set up our LINE channel which will be connected to your uTeach Cloud app.

Go to the LINE Developers page.

Input your LINE information

It’s important to use the same provider if you already have a LINE channel or have already set up the login with LINE functionality. Enter the Provider Name (if you have selected create new provider in previous step), Channel Name, Channel Description, select category and subcategory. The values you enter here will be displayed to users when they add your LINE account as their friend.

After you’ve input everything, go ahead and click “create”

Navigate to Messaging API tab

Here you’ll need to enter your webhook URL, which you will see in the Line Settings page on uTeach Cloud. It should look something like:

https://www.uteach.jp/[yournamehere]/api/line/webhook

Enter Channel Info on uTeach Cloud

Back on LINE’s “Basic Settings” page you will be able to find your “Channel ID”, “Channel Secret”, and “Assertion Private Key”. Please copy these to your settings on uTeach Cloud and save your settings.

Next, go back to the Messaging API tab on LINE and click “verify” to make sure your webhook is working properly.

Step 2: Set up Log-in with LINE

Once more, you’ll need to head over the the LINE Developers page to make a channel for LINE login.

This stage looks very similar to the last. Just make sure to enter the same provider!

Also, make sure to set the “App types” to “Web app”.

Enter callback URL from uTeach Cloud settings

Similar to the webhook in the previous step, we will want to copy the callback URL from the uTeach Cloud Line Settings page and input it.

After that, just click “Developing” to publish your LINE login.

Input info from LINE “Basic settings” on uTeach Cloud.

You’ll need your Channel ID and Channel Secret. Input these on uTeach Cloud and Save.

Step 3: Try it out

Now you’ll see the LINE friend adding and Login buttons on your uTeach Cloud login screen. First, click on the “Add Friend” Button.

You’ll be sent to LINE and asked if you want to add this user as a friend.

Upon confirmation, you’ll receive a link asking you to “Link My Account” to the uTeach Cloud app.

The link will prompt you to login to the uTeach Cloud app.

After logging in, you’ll get confirmation of your account linking.

Now all you need to do is click the Login with LINE button and you’ll be able to login with LINE as well as receive notifications via LINE from the app!

Step 4: Set up notifications

This is easier, but more time consuming. With LINE enabled, you’ll need to go into the Notification Settings and update the Line Notification Text to your liking.