채널 버튼 커스터마이징 하기

채널 설정 > 일반 설정 > 버튼 설치 및 설정 > 웹 버튼 설정 섹션의 채널톡 버튼 설정은 JavaScript SDK에서만 적용됩니다. 안드로이드 SDK에서 채널 버튼을 커스터마이징 하려면 BootConfig로 설정하거나 직접 뷰를 만들어야 합니다.

버튼 위치 옮기기

기본적으로 채널톡 버튼은 화면의 오른쪽 하단에 배치됩니다. 앱의 UI상 다른 곳에 배치해야 하는 경우 부트할 때 BootConfig#setChannelButtonOption(ChannelButtonOption)으로 설정할 수 있습니다. 버튼이 오른쪽과 왼쪽 중 어느 쪽에 위치할지 설정하거나 DP 단위로 여백을 설정할 수 있습니다.

val config = BootConfig.create(PLUGIN_KEY)
	.setChannelButtonOption(ChannelButtonOption(ChannelButtonPosition.RIGHT, 16, 16)) // X축/Y축 각각 16dp 떨어짐

커스텀 채널톡 버튼

안드로이드 SDK에서 메신저 켜는 방법을 커스터마이징을 하고 싶은 경우에는 직접 새로운 뷰를 만든 후, ChannelIO.showMessenger()를 호출해서 직접 메신저를 표시할 수 있습니다.

<!-- res/layout/activity_example.xml -->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <Button
      android:id="@+id/btn_launch_channel"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Show Channel Plugin"/>

</FrameLayout>

class ExampleActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_example)

		findViewById(R.id.btn_launch_channel).setOnClickListener {
			ChannelIO.showMessenger(this)
		}
	}
}

안 읽은 메시지 개수 표시

채널 버튼을 직접 구현하는 경우, 유저가 자신이 안 읽은 메시지를 인지할 수 있도록 뱃지를 표시해줘야 합니다. 안 읽은 메시지 개수는 ChannelPluginListener#onBadgeChanged(int, int)를 통해서 받을 수 있습니다.

class ExampleActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		// ...
		ChannelIO.setListener(object : ChannelPluginListener {
			// ...
			override fun onBadgeChanged(unread: Int, alert: Int) {
				findViewById<TextView>(R.id.badge_counter).text = "$unread, $alert"
			}
		})
		// ...
	}
}

팝업 커스터마이징 하기

매니저가 유저의 상담에 답변을 하거나 마케팅 메시지를 받으면 유저는 SDK를 통해서 알림을 확인할 수 있습니다. 만약 유저가 앱을 사용 중이라면 시스템 푸시가 아닌 채널톡이 제공하는 인앱 팝업이 표시되는데, 필요에 따라서 이 동작을 커스터마이징 할 수 있습니다. 만약 팝업의 위치만 수정하는 것으로 충분하다면 부트할 때 setBubbleOption()를 사용합니다. 이 설정으로 위치와 여백을 조정할 수 있습니다.

val config = BootConfig.create(PLUGIN_KEY)
	.setBubbleOption(BubbleOption(BubblePosition.BOTTOM, 30f))

SDK에서 제공하는 기본 팝업의 설정만으로 요구를 충족할 수 없다면 다음 단계에 따라 직접 뷰를 만들 수 있습니다.

BootConfig.setHidePopup(boolean)를 이용해 SDK가 팝업을 띄워주지 않도록 합니다.

val config = BootConfig.create(PLUGIN_KEY)
	.setHidePopup(true)

ChannelPluginListener#onPopupDataReceived(PopupData)를 이용해 PopupData를 받아서 팝업을 표시할 수 있습니다.

class ExampleActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		// ...
		ChannelIO.setListener(object : ChannelPluginListener {
			// ...
			override fun onPopupDataReceived(popupData: PopupData) {
				// 팝업 표시...
			}
		})
	}
}

이벤트 트래킹

만약 채널톡을 통해 수집하고 싶은 이벤트가 있는 경우 track()을 이용합니다. 더 자세한 내용은 이벤트에 대해서 참조합니다.

fun onUserScrolled80PercentOfScreen(durationOfPageView: Long) {
	ChannelIO.track("FullPageView", mapOf(
		"duration" to durationOfPageView
	))
}