Developing Channel Web Applications

This page explains how to develop Channel Web Applications for the LINE app.

Developing and launching a simple application

Here we will walk you through the process of creating a simple Channel Web Application that displays the words, “Hello, Channel Web Application!”.

Create an HTML file to be loaded by the entry URL registered earlier. It should look like this:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Hello, Channel Web Application!</p>
  </body>
</html>

Save the above into an appropriately named HTML file and place it on your web server. You are now ready to test your application. Run your Channel Web Application from the LINE app using the following URL format.

  • line://ch/[Channel ID] – Launch the LINE app directly.
  • https://line.me/R/ch/[Channel ID] – If the LINE app is not installed, the store page will be opened.

Follow the steps below to get your Channel ID.

  1. Click Channels on the top right and log in to the Channel Console.
  2. Select your Channel from the list on the left to find your Channel ID.

Once you have your Channel ID, access the URL shown above. The easiest way to do this is to send the URL to yourself by creating a group in which you are the only member.

Click on the URL to open WebView. If it displays a web page with a message that reads “Hello, Channel Web Application!”, your application is running successfully.

The title bar (bar displayed at the top of the screen) lets you control your application using the JavaScript SDK. It has an exit button which lets users return to the LINE app from WebView.

Launching applications with parameters

Your Channel Web Application can be launched with the following line scheme:

  • line://ch/[Channel ID]

To pass parameters to your application via the line scheme above, append the parameters to the line scheme as shown below:

  • line://ch/[Channel ID]/param1/param2?key1=value1&key2=value2

For example, if the entry URL is https://entry.url/page, the passed parameters will be appended as follows:

  • https://entry.url/page/param1/param2?key1=value1&key2=value2

Note: When adding parameters to the line scheme, make sure to add a slash (/) after the Channel ID as shown below:

  • line://ch/[Channel ID]/?key1=value1

Installing the JavaScript SDK

The JavaScript SDK lets you add a social element to your application by integrating it with LINE. With the JavaScript SDK, you can retrieve data such as user profiles and friends lists.

To use the JavaScript SDK, import the JavaScript SDK file as a script element in the head of the HTML file that you want.

    Note: Ask your LINE representative for the location of the JavaScript SDK file.
    Note: Channel Web Applications and the JavaScript SDK are only available to partners who are using Business Connect.

The JavaScript SDK includes many APIs which can be used once a deviceready event has been generated inside the web browser. The following is an example of HTML code with the JavaScript SDK embedded inside.

<!DOCTYPE html>
<html>
<head>
<!-- Loading JavaScript SDK file -->
<script src=LOCATION_OF_JAVASCRIPT_SDK></script>
<script type="text/javascript">
window.addEventListener("load", function(evt) {
  document.addEventListener("deviceready", function(evt) {
    // Can use JavaScript SDK APIs from here!
    document.getElementById("ready").innerHTML = "Hello, Channel Web Application with JavaScript SDK!";
  }, false);
});
</script>
</head>
<body>
  <p id="ready"></p>
</body>
</html>

You must import the JavaScript SDK and perform deviceready event monitoring on every web page of your Channel Web Application.

Controlling the title bar

The title bar is found at the top of the screen where your application runs. It is not a part of WebView. It is a native UI element in Android and iOS. The title bar is used to:

  • Provide the user with a unified user interface
  • Give the user a way to return to the LINE app if the page fails to load

At first, the title bar only has an exit button on the right to close your application. It can be modified in the following ways using the JavaScript SDK API:

  • Change the string displayed for the left button, change the operation performed on click
  • Change the string displayed in the middle, change the operation performed on click
  • Change the string displayed for the right button, change the operation performed on click

A typical setup is to have the left button take you to the previous page and the right button close the application.

The following shows you how to use the LCS.Interface.updateTitleBar() function in the JavaScript SDK API to change the string displayed on the left button to Back, the middle string to Sample game, and the right button to Close.

var options = {
  pageKey: "key1",
  titleBar: {
    left: {
      imgId: "btn_default",
      text: "Back",
      visible: true,
      enable: true
    },
    center: {
      text: "Sample game",
      clickable: true
    },
    right: {
      imgId: "btn_default",
      text: "Close",
      visible: true
      enable: true
    }
  }
};
LCS.Interface.updateTitleBar(options);

If you omit the properties for left and right, the back button will be displayed on the left and the exit button on the right.

Touch events can be handled and processed independently for the left button, right button and center title string. The following shows how to register an event handler using the LCS.Interface.registerTitleBarCallback function. The element on the screen that gets tapped behaves according to the properties of the object passed to it by the event handler.

LCS.Interface.registerTitleBarCallback(function(evt) {
  switch(evt.target) {
  case "LBUTTON":
    // When the left button is tapped
    break;
  case "RBUTTON":
    // When the right button is tapped
    break;
  case "BACK":
    // When the default left button is tapped
    break;
  case "TITLE":
    // When the title area is tapped
    break;
  }
});

Closing applications

Call the LCS.Interface.closeWebView function to close your application.

LCS.Interface.closeWebView();