/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

const SUPPORT_LANGUAGES = ["ko", "ja", "en", "zh", "th"];
const FALLBACK_LANGUAGE = "en";

const browserLanguage = navigator.language || navigator.userLanguage || "en";
const userLang = browserLanguage.split("-")[0];
const siteLang = window.location.pathname.split("_").pop();

const isNeedRedirect = window.location.pathname.indexOf("_") !== -1;
const isLineCorpUrl = window.location.origin.endsWith("linecorp.com");

if (!isLineCorpUrl && isNeedRedirect && siteLang !== userLang) {
  const SITE_PREFIX = window.location.pathname.split("_").shift() + "_";
  let lang = FALLBACK_LANGUAGE
  if (SUPPORT_LANGUAGES.indexOf(userLang) !== -1) {
    lang = userLang
  }
  if (lang !== siteLang) {
    window.location.href = SITE_PREFIX + lang + window.location.search;
  }
}


Redirect Code

/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

/**
 * Insert this script into https://landpress-studio.linecorp.com/projects/772/setting/commoncode
 */

const currentUrl = new URL(window.location)
const originalEncodedParams = currentUrl.searchParams.get('liff.state')
let bypassParams = null
if (originalEncodedParams) {
  bypassParams = {}
  const originalParams = new URLSearchParams(decodeURIComponent(originalEncodedParams))
  originalParams.forEach((value, key) => {
    if (key.startsWith('utm_')) {
      bypassParams[key] = value
    } else if (key.startsWith('bypass_')) {
      bypassParams[key.substring(7)] = value
    }
  })
}

/**
 * @param {string} [s] a suffix text to be added into content of anchor
 */
const adjustAnchors = (s) => {
  const bypassAnchors = [
    // button section
    ...document.querySelectorAll('section[id^="bypassSection_"] > div > div > div > a'),
    ...document.querySelectorAll('div[id^="bypassSection_"] > div > div > div > a'),
    // image card section
    ...document.querySelectorAll('section[id^="bypassSection_"] > div > div > div > div > div > div > a'),
    ...document.querySelectorAll('div[id^="bypassSection_"] > div > div > div > div > div > div > a'),
  ]
  bypassAnchors.forEach(anchor => {
    let href = anchor.getAttribute('href')
    if (!href || !bypassParams) {
      console.warn('There is no href or bypass params')
      return
    }
    // cache the origin href into 'data-href' attribute
    if (anchor.dataset.href) {
      href = anchor.dataset.href
    } else {
      anchor.dataset.href = href
    }
    console.log(`Adjusting anchor with params ${JSON.stringify(bypassParams)} and suffix ${s}...`)
    const url = new URL(href)
    if (url.hostname === 'profilestudio.line.me') {
      let liffState = url.searchParams.get('liff.state') || ''
      const liffStateParams = new URLSearchParams(decodeURIComponent(liffState))
      for (const key in bypassParams) {
        liffStateParams.set(key.startsWith('utm_') ? key : `bypass_${key}`, bypassParams[key])
      }
      liffState = liffStateParams.toString()
      url.searchParams.set('liff.state', liffState)
    } else if (url.hostname === 'liff.line-beta.me' || url.hostname === 'liff.line.me') {
      for (const key in bypassParams) {
        url.searchParams.set(key.startsWith('utm_') ? key : `bypass_${key}`, bypassParams[key])
      }
    } else {
      for (const key in bypassParams) {
        url.searchParams.set(key, bypassParams[key])
      }
    }
    anchor.setAttribute('href', url.toString())
    s && (anchor.children[0].innerHTML += ` (${s})`)
  })
}

document.addEventListener('readystatechange', () => {
  console.info(`document > ${document.readyState}`)
  adjustAnchors()
})

document.addEventListener('DOMContentLoaded', () => {
  console.info('DOM loaded')
  adjustAnchors()
})

window.addEventListener('load', () => {
  console.info('window > onload')
  adjustAnchors()
})


to bypass `bypass_*` & `utm_*` query parameters from URL to pre-defined buttons inside LIFF page

Bypass query params to buttons

/*
 * Copyright (c) 2024 LINE Corporation. All rights reserved.
 * LINE Corporation PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
 */

/**
 * Ref:
 *  https://wiki.workers-hub.com/display/UTSDEPT/UTS+Log+design+general+guide
 *  https://git.linecorp.com/UTS/uts-sdk-js#usage
 */

const utsId = 'line_user_profile'
const applicationName = 'Profile Studio'
let env = 'release'
let utsEndpoint = ''

const pathname = window.location.pathname
if (pathname.startsWith('/beta-')) {
  env = 'beta'
}

/** @type {HTMLMetaElement | null} */
const utsEnvMeta = document.querySelector('meta[name="uts:env"]')
if (utsEnvMeta) {
  env = utsEnvMeta.content
}

switch (env) {
  case 'beta':
    utsEndpoint = 'https://uts-front.line-apps-beta.com'
    break
  case 'release':
    utsEndpoint = 'https://uts-front.line-apps.com'
    break
  default:
    throw `Not support UTS env [${env}] yet`
}

const injectUts = () => {
  if (document.querySelector('script#uts') || !document.body) {
    return
  }

  const script = document.createElement('script')
  script.id = 'uts'
  script.src = 'https://static.line-scdn.net/uts/edge/stable/uts.js'
  script.dataset.nscript = 'afterInteractive'

  document.body.append(script)
  script.onload = () => {
    console.info('Loaded UTS script, initializing UTS...')

    window.uts.init({
        utsId,
        appName: applicationName,
        appEnv: env,
      }, {
        endpoint: utsEndpoint
      }
    )

    /** @type {HTMLMetaElement | null} */
    const utsScreenNameMeta = document.querySelector('meta[name="uts:screen_name"]')
    const screenName = utsScreenNameMeta ? utsScreenNameMeta.content : pathname
    console.info(`Sending 'pageview' event with screen name = [${screenName}]`)
    window.uts.sendPageview({screenName})
  }

  console.info('Appended UTS script')
}

const trackAnchorClickEvent = () => {
  const anchors = document.querySelectorAll('a')
  anchors.forEach(anchor => {
    if (anchor.dataset.utsClick) {
      return
    }

    anchor.addEventListener('click', (e) => {
      /** @type {HTMLAnchorElement} */
      const target = e.target || e.currentTarget
      const hrefAttr = target.getAttribute('href')
      const hrefData = target.dataset.href
      window.uts.sendClick({params: {href: hrefData || hrefAttr}}, undefined, () => {
        console.info(`Sent 'click' event with href = [${hrefData || hrefAttr}]`)
        window.location.href = hrefAttr
      })
      e.preventDefault()
      e.stopPropagation()
      return false
    })

    anchor.dataset.utsClick = 'true'
    console.info(`Tracked 'click' event of anchor with href = ${anchor.getAttribute('href')}`)
  })
}

document.addEventListener('readystatechange', () => {
  injectUts()
  if (document.readyState === 'complete') {
    trackAnchorClickEvent()
  }
})

document.addEventListener('DOMContentLoaded', () => {
  injectUts()
  trackAnchorClickEvent()
})

window.addEventListener('load', () => {
  injectUts()
  trackAnchorClickEvent()
})


AI ID Photo

How to use this feature

All it takes is 3 easy steps.

AI image examples

The AI model generates 20 images.

FAQ