기존 채널톡 플러그인이 고객사 사이트 내부 스타일의 영향을 받아 채널톡 버튼 스타일이 깨지는 등의 이슈가 있었습니다.
따라서, 업데이트를 통해 기존에 고객사에서 사용하시는 스타일이 채널톡 플러그인에 영향을 주지 않도록 개선됩니다.
<aside> 💡 문제
고객사 CSS이 채널톡 플러그인에 영향을 주어 채널톡 버튼 스타일이 깨지는 등의 문제가 발생
개선 방향
Shadow DOM을 사용하여 채널톡 플러그인이 고객사 사이트의 CSS 등을 공유받지 않기 위해 채널톡 플러그인 모듈화
적용 일자
2023년 1월 19일
예상되는 상황
채널톡 엘리먼트에 css 선택자 또는 자바스크립트를 통해 직접 접근하여 스타일을 변경해주고 있었을 경우, 업데이트 이후 더이상 임의로 채널톡 플러그인의 스타일을 변경할 수 없게 되는 점 참고 부탁드립니다.
</aside>
개선 방향
다음과 같은 고객사의 스타일이 더 이상 채널톡 플러그인에 영향을 주지 않습니다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
color: #999;
}
다음과 같이 채널톡 엘리먼트에 직접 접근해서 스타일을 변경할 수 없게 됩니다.
#ch-plugin-core > * {
z-index: 100;
}
다음과 같이 Javascript로 엘리먼트에 직접 접근해서 스타일을 변경할 수 없게 됩니다.
document.querySelector('#ch-plugin-core').style.display = 'none'