고급 기능
액션 버튼 추가하기
플러그인 헤더는 주로 제공된 다양한 옵션을 사용하여 제어할 수 있습니다. 예를 들어,
hideCloseButton 옵션을 사용하여 닫기 버튼을 숨길 수 있습니다.
그러나 사용자 정의 버튼을 추가하는 기본 방법은 없습니다. 가장 좋은 방법은, 플러그인이 열린 후 타임아웃을 사용하여 사용자 정의 버튼을 추가하는 것입니다. 아래 코드를
onOpen 옵션으로 붙여넣으면 플러그인 헤더에 사용자 정의 버튼이 표시됩니다.javascript
window.MLCPlugin.init(<WINDOW_ID>, {
...,
onOpen: () => {
const timeout = setTimeout(() => {
const pluginContainer = document.querySelector("#mindlogic-chatapi") // Adjust selector as needed
if (pluginContainer && pluginContainer.shadowRoot) {
// Now you can query elements inside the shadow DOM
const header =
pluginContainer.shadowRoot.querySelector("#mlc-chat-header")
const buttonsContainer = header?.querySelector("div")
const chatButton = document.createElement("button")
const chatButtonClassName = "mlc-header-element"
chatButton.textContent = "Click!"
chatButton.classList.add(chatButtonClassName)
chatButton.addEventListener("click", () => {
// redirect to google
alert("chatButton clicked")
window.location.href = "https://www.google.com"
})
buttonsContainer?.prepend(chatButton)
} else {
console.log("Cannot access shadow DOM or it doesn't exist yet")
}
clearTimeout(timeout)
}, 251) // The load-in animation takes 250ms
},
});
마지막 수정 날짜: Apr 24, 2025