////
Search
🚜

チャネルトークのモジュール化に関する告知

いままで、チャネルトークのプラグインがお客さまのサイト内部のスタイルの影響を受け、ボタンのスタイルが正常に表示されないといった問題がございました。
そのため、チャネルトークが設置されているサイトで使用されているスタイルがチャネルトークのプラグインに影響を与えないようにアップデートされます。
問題
お客様のサイトのCSSがチャネルトークのプラグインに影響を与え、チャネルトークのボタンが正常に表示されない
アップデート内容
シャドウ DOMを利用して、チャネルトークのプラグインがお客様のサイトのCSSなどの影響を受けないようにプラグインをモジュール化いたします。
アップデート日
2023年1月19日
予想される影響
チャネルトークのエレメントにcssまたはJavascriptでスタイルを変更している場合、アップデート後、これ以上任意でチャネルトークプラグインのスタイルを変更できなくなりますので、ご注意くださいませ。
アップデート内容
下記のスタイルは、チャネルトークのプラグインに影響を与えなくなります。
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; }
CSS
복사
次のように、チャネルトークのエレメントに直接アクセスしてスタイルを変更できなくなります。
#ch-plugin-core > * { z-index: 100; }
CSS
복사
z-indexを設定する場合、Boot optionのzIndexを利用してください。
次のように、Javascriptでエレメントに直接アクセスしてスタイルを変更できなくなります。
document.querySelector('#ch-plugin-core').style.display = 'none'
JavaScript
복사
チャネルトークのチャットボタンを非表示にしたい場合は、BootoptionのhideChannelButtonOnBootを利用してください。