Customization

Channel settings > General > Manage Plug-in > Web plug-in Settings only affect the JavaScript SDK. To customize Channel button in the Android SDK, configure BootConfig or create a new view to show your Channel button.

Moving Channel button

The Channel Button is placed at the bottom right in the default BootConfig. If your app’s UI requires the button to be placed at a different position, call BootConfig#setChannelButtonOption(ChannelButtonOption). You can set the anchor of the button (left or right) on the screen and the margin from the anchor.

BootConfig bootConfig = BootConfig.create(YOUR_PLUGIN_KEY)
        .setChannelButtonOption(new ChannelButtonOption(ChannelButtonPosition.RIGHT, 16, 16));

val config = BootConfig.create(YOUR_PLUGIN_KEY)
	.setChannelButtonOption(ChannelButtonOption(ChannelButtonPosition.RIGHT, 16, 16))

Custom Channel button

The customization of Android SDK, for example, changing an icon of the button, requires a custom view that shows a messenger when clicked.

<!-- 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>

public class ExampleActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_example);

    findViewById(R.id.btn_launch_channel).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ChannelIO.showMessenger(ExampleActivity.this);
      }
    });
  }
}

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)
		}
	}
}

Display the number of unread messages

If you are fully customizing the Channel Button, displaying the number of unread messages is strongly recommended to let users notice the new messages. The number of unread messages can be retrieved by ChannelPluginListener#onBadgeChanged(int, int).

public class ExampleActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...
    ChannelIO.setListener(new ChannelPluginListener() {
      // ...
      @Override
      public void onBadgeChanged(int unread, int alert) {
        findViewById<TextView>(R.id.badge_counter).setText(String.valueOf(unread) + ", " + String.valueOf(alert));
      }
      // ...
    });
  }
}

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"
			}
		})
		// ...
	}
}

Customizing popup

If the manager replies to a conversation, a user gets notified by the SDK. The user will get an Channel’s in-app popup instead of the system push notification when the app is in the foreground. You can pass a BubbleOption to the BootConfig#setBubbleOption(BubbleOption) to set the position of the in-app popup.

BootConfig bootConfig = BootConfig.create(YOUR_PLUGIN_KEY)
    .setBubbleOption(new BubbleOption(BubblePosition.BOTTOM ,30f));

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

If the customization provided by the SDK cannot meet your requirement, follow the steps below and create a new custom view to display the popup.

Disable the default popup implementation using BootConfig.setHidePopup(boolean).

BootConfig bootConfig = BootConfig.create(YOUR_PLUGIN_KEY)
    .setHidePopup(true);

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

Display your custom popup view using data from ChannelPluginListener#onPopupDataReceived(PopupData).

public class ExampleActivity extends AppCompatActivity {
  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...
    ChannelIO.setListener(new ChannelPluginListener() {
      // ...
      @Override
      public void onPopupDataReceived(int count) {
        // 팝업 표시...
      }
      // ...
    });
  }
}

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

Event tracking

Use ChannelIO.track() to track an event. See what an event is for detail.

public void onUserScrolled80PercentOfScreen(long durationOfPageView) {
  Map<String, Object> map = new HashMap<>();
  map.put("duration", durationOfPageView);
  
  ChannelIO.track("FullPageView", map);
}

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

You can find the tracked events in the event section of the user chat description.