With the friend-add CTA, you can put a LINE friend-add prompt on your own website. You decide the copy and display rules in Lumo and paste the tracking code on the site. Four types are available: floating, popup, bar and inline.
What the friend-add CTA does
You can add one of four prompt types that invite visitors to add you as a LINE friend right there on the page.
| Type | How it looks | Best for |
|---|---|---|
| Floating | A button that stays in a corner of the screen. On PC, clicking it shows a QR code | A quiet prompt on every page |
| Popup | A modal that appears after a delay or on scroll. Visitors can close it | Making an offer stand out and nudging the friend add |
| Bar | A band fixed to the top or bottom of the screen | A prompt that's always in view without getting in the way |
| Inline | A block embedded anywhere on the page (you put a marker in the site's HTML) | A fixed spot such as inside an article or in the footer |
On a phone, tapping the button opens the LINE app and the friend add finishes there. On PC, the QR code takes centre stage so visitors scan it with their phone. "Continue on PC →" appears next to the QR code, so visitors can also log in to LINE in the PC browser.
Friends who come through a CTA are recorded with the route "Website friend-add CTA". The CTA's name is recorded as the touchpoint, so you can tell which CTA brought each friend (behind the scenes, Lumo creates one QR code per CTA and uses it to record the route). The URL of the page where the friend add started is recorded too. You can use the route, touchpoint and page as conditions in reports, workflows and segments.
On a Shopify store, the prompt also switches to an ID-link invitation based on the customer's login state. The article "Showing a LINE friend-add CTA on your store" explains how it works there.
What you need to use this feature
Showing a CTA requires the Starter plan or higher and LINE Login.
- Your workspace is on the Starter plan or higher
- LINE Login is set up on the LINE official account (it drives the friend-add flow)
- You can paste the tracking code on every page of your website (your web agency can do this for you)
The CTA works alongside popups from other tools. Put them in different corners and they won't overlap.
Opening the CTA list
The CTA list lives in the LINE official account's side menu.
Pick the LINE official account in the navigation menu and click "CTA" in the side menu (it sits right under "QR Codes").
The list shows each CTA's name, type and status, plus views, clicks and friend adds for the last 30 days. Click "Create CTA" to add one.
Creating a CTA
Set the type and copy, the offer, the display rules, measurement and installation in that order, then click "Save CTA". The preview on the right updates as you go, so you can check how it looks while you work.
Basic settings
Name the CTA and choose its type and position.
| Setting | Description |
|---|---|
| CTA name | An internal name. It isn't shown on the site |
| Type | Floating, popup, bar or inline. Floating is selected at first |
| Position | Bottom right or bottom left for floating; top or bottom for the bar |
Copy
Leave the heading, body and button text blank and Lumo shows its default copy. Switch "Language to edit" to write Japanese, English, Traditional Chinese and Thai separately. The CTA picks the language from the visitor's browser.
You can also set the small "Note" under the button and, for popups, an "Image" at the top.
Offer
Choose "Show an offer" under "Offer" to set the "Offer name shown to visitors", for example "10% off coupon". {coupon} in the body is replaced with this name.
The CTA only announces the offer. The coupon or other reward itself is delivered by the response message of the QR code that Lumo creates for the CTA, or by a workflow message.
Display rules
Decide which sites and pages show the CTA, and when.
| Setting | Description |
|---|---|
| Sites to show on | The URLs of the sites where the CTA appears, one per line (required). Start with https:// and stop at the domain. The CTA appears only on the sites listed here. If you've limited tracking to specific sites under the workspace setting "Tracking", list sites within that range |
| URL contains | One string per line; the CTA appears only on pages whose URL contains it |
| Exclude URLs | One per line; the CTA won't appear on these URLs |
| When to show | Immediately, after a delay, or at a scroll percentage (for popups) |
| Devices | All devices, Mobile only or PC only |
| Frequency | How many days to wait after a visitor closes the CTA, and whether to show it only once per visit |
| After closing | What happens after a popup or bar is closed. With "Keep as a floating button (default)", a small button stays in a corner so visitors can reopen it at any time. With "Hide", it stays hidden until the waiting period passes. When keeping it, choose bottom right or bottom left under "Floating button position" |
If a separate floating CTA is on the same page, the small button after closing isn't shown. Only one popup appears per page.
Measurement
Set "Control group (hidden) ratio" to hide the CTA from a share of visitors so you can measure its effect. 0% turns it off.
"Traffic source" shows the route Lumo created for this CTA once it's saved, marked "Auto-created". Friends added through this CTA are recorded with the route "Website friend-add CTA" and the touchpoint set to the CTA's name, so both can be used as-is in reports and workflow conditions.
To send a greeting or reward message right after the friend add, use "Set up greeting and reward messages". It opens the QR code's response message editor, where you can add messages and save. Use "Open route details (QR code)" to review the route itself.
Installation
"Installation" shows the tracking code to paste on your site.
- Tracking code: click "Copy" and paste it right before the
</body>tag on every page of the sites listed under "Sites to show on". The code is shared across the workspace, so a site that already has it needs no extra work - Inline paste HTML: shown when the type is inline. Paste this HTML (
<div data-lumo-cta="inline"></div>) where the inline CTA should appear
Preview
In the preview on the right, switch "Device" between phone and PC to check how the CTA looks.
Pasting the tracking code on your site
After saving the CTA, paste the tracking code on every page of the sites you listed under "Sites to show on".
| Step | Action |
|---|---|
| 1 | In the CTA's create/edit screen, click "Copy" next to the tracking code under "Installation" |
| 2 | Paste it right before the </body> tag on every page of your website (a shared template or footer saves you doing it page by page) |
| 3 | Open the site you listed and check that the CTA appears |
The tracking code is the same one shown under the workspace setting "Tracking". If "Only track on specific sites" is on in the workspace settings, the CTA appears only on the sites listed under "Sites to track". The article "Setting Up the Tracking Code" explains what the code does and how to install it in detail.
What happens when a PC visitor scans the QR code
PC visitors are guided to scan the QR code with their phone.
Scanning the QR code completes the friend add in the LINE app on the phone. A website can't tell whether the visitor is logged in, so no ID link is made. For safety, a fresh QR code is issued every time the popup or panel opens.
If scanning is difficult, "Continue on PC →" lets the visitor log in to LINE in the PC browser. After the friend add, they return to the page they were on, and the CTA no longer appears in that browser.
On the Starter plan, the PC QR code view carries a "Powered by Lumo" credit.
Checking the results
You can review and use the CTA's results in the list figures, reports and workflow conditions.
- List figures: views, clicks and friend adds for the last 30 days, per CTA
- Friend-add sources: friends who come through a CTA are recorded with the route "Website friend-add CTA" and the CTA's name as the touchpoint. The friend-add source report shows which CTA brought each friend
- Acquisition funnel report: in the report Acquisition Funnel dataset, analyze how many people reach each stage — CTA views → clicks → friend adds — by route and touchpoint
- Workflow and segment conditions: use the route type, the QR code (CTA) and the URL of the page the friend add started on as conditions, for example to send the offer message only to friends who came from this CTA
- External services: when HubSpot or Klaviyo is connected, the first friend-add route and page are written to the "LINE Acquisition Route" and "LINE Acquisition Page" properties, and the name of the CTA the friend came from to the "LINE Traffic Source" property
When things don't work
When the CTA doesn't appear, check the listed sites and the tracking code first.
| Symptom | What to check |
|---|---|
| Nothing appears on the site | Check that the site you're viewing is listed under "Sites to show on" starting with https://, that the tracking code is pasted right before </body> on every page, and that the CTA's "Status" is active. If tracking is limited to specific sites under the workspace setting "Tracking", check that the site is listed under "Sites to track" too |
| It doesn't appear on a specific page | Check "URL contains", "Exclude URLs" and "Devices" |
| It stopped appearing after being closed | During the waiting period set under "Frequency", it doesn't reappear on its own. Set "After closing" to "Keep as a floating button" so visitors can reopen it from the small button |
| You see it but some visitors don't | The share set under "Control group (hidden) ratio" is deliberately not shown the CTA. It's also hidden in a browser where the friend add was completed on PC |
| The inline CTA doesn't appear | Check that the "Inline paste HTML" from "Installation" is pasted where the CTA should appear and that the page matches the inline CTA's display rules |
| The offer coupon doesn't arrive | Offers are sent by the CTA's QR code response message or a workflow. Check that the message is set up and that the campaign is active |
| What happens to the QR code when a CTA is deleted | Deleting a CTA keeps the QR code Lumo created and the route records |