플러그인 버튼 커스터마이징하기

CSS나 Javascript를 통해 플러그인 버튼의 위치를 변경하거나 버튼과 텍스트 색을 변경할 수 있습니다. 또한 임의로 버튼을 보여주거나 숨길 수도 있습니다.

온라인 환경 설정을 통한 방법

채널 데스크에서 채널 설정으로 들어간 후, 플러그인 관리하기에 들어갑니다.

플러그인 목록에서 플러그인 이름이나 수정 버튼을 클릭합니다.

플러그인 설정 창이 뜨면 버튼에 들어갈 텍스트를 입력하거나 버튼과 말풍선의 색을 설정할 수 있습니다.

코드 직접 수정

CSS를 이용한 설정 방법

버튼의 위치만 조정하고 싶다면 간단한 코드를 추가하면 가능합니다.

#ch-plugin-button-position 스타일을 수정합니다.

(CSS는 될 수 있으면 position 속성만 수정하기를 권장합니다)

#ch-plugin-button-position {
    bottom: 70px;
    right: 30px;
    /* left, right, top, bottom과 같이 
    position에 관련된 속성만 변경하는 것을 권장합니다.*/
}

JavaScript를 이용한 설정 방법

버튼을 보여주거나 숨기고, 원하는 링크나 버튼에 플러그인을 넣는 방법입니다. (단, 매니저가 말을 걸었을 때 아바타가 보이지 않거나 환영 메시지가 나오지 않는 것과 같이 제한이 있을 수 있습니다)

1. channelPluginSettings에 hideDefaultPluginButton 옵션을 true로 넘겨서 기본 플러그인 버튼을 가립니다.

2. 직접 버튼을 만들고 버튼을 클릭했을 때, CHPlugin.show() API를 호출합니다. (플러그인이 정상적으로 초기화되면 window에 CHPlugin 오브젝트가 만들어지고, 현재는 show/hide API가 제공됩니다.)

<!-- Channel Plugin Scripts -->
    <script>
        window.channelPluginSettings = {
            "plugin_id": "7d31a825-d8c9-4b5b-818f-67cd7760f26b",
            "hideDefaultPluginButton": true
        };
        (function() {
            document.body.innerHTML += '<div id=\'ch-plugin\'></div>';
            var async_load = function() {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = '//cdn.channel.io/plugin/ch-plugin-web.js';
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            };
            if (window.attachEvent) {
                window.attachEvent('onload', async_load);
            } else {
                window.addEventListener('load', async_load, false);
            }
        })();
    </script>
    <!-- End Channel Plugin -->

<button onclick="window.CHPlugin.show()">Open</button>