URL 매개변수에서 메시지 트리거

자동 트리거 작동 방식

채팅 위젯 로딩이 완료되면 스크립트는 다음 작업을 실행합니다:

• 채팅 위젯이 초기화를 완료할 수 있도록 잠시 기다립니다.

• 현재 페이지(예 https://yoursite.com?data=hello: URL )에서 쿼리 매개변수를 읽습니다.

• 추출된 값을 채팅 메시지로 자동 전송합니다.

이 기술은 대화를 미리 채우거나, 특정 채팅 흐름으로 심층 링크를 설정하거나, 컨텍스트 인식 상호작용을 자동화하는 데 유용합니다.

1단계: 채팅 인스턴스로 전송할 데이터를 조회합니다

채팅 위젯이 완전히 로드된 후 실행될 함수를 onChatLoad 생성합니다. 다음과 같은 작업을 수행합니다:

• 자동 로직이 한 번만 실행되도록 보장하기 위해 pageload 플래그를 사용합니다.

• 채팅 위젯 UI가 초기화되었는지 확인하기 위해 5초간 대기합니다.

• URL 에서 데이터 쿼리 매개변수를 추출합니다. 이를 위해 API를 URLSearchParams 사용합니다.

• . instance.send()을 사용하여 추출된 값을 채팅창으로 전송합니다.

• 나중에 필요할 경우를 대비해 채팅 인스턴스를 전역적으로 저장합니다.

function onChatLoad(instance) {
    
    let pageload = false;
    if (!pageload){
        setTimeout(() => {
            const params = new URLSearchParams(window.location.search);
            const data = params.get('data');
            if (data) {
                instance.send(data);
            }
        }, 5000)
        pageload = true;
    }
    chatInstance = instance;
}

2단계: 스크립트 테스트

스크립트를 웹페이지에 추가하고 URL 에 데이터 쿼리 매개변수를 포함시키세요. 예를 들어,

https://mywebsite.com/deep-link?data=generate%20a%20sample%20email

채팅 위젯이 로드되면, 해당 instance.send() 기능을 통해 다음 메시지가 자동으로 전송됩니다.

generate a sample email

전체 대본

다음 스크립트를 사용하여 이 튜토리얼의 코드를 채팅 위젯에 적용하세요:

<script>
function onChatLoad(instance) {

    let pageload = false;

    if (!pageload) {
        setTimeout(() => {
            const params = new URLSearchParams(window.location.search);
            const data = params.get('data');
            if (data) {
                instance.send(data);
            }
        }, 10000)
        pageload = true;
    }
    chatInstance = instance;
}

window.wxOConfiguration = {
    orchestrationID: "your-orgID_orchestrationID",
    hostURL: "https://dl.watson-orchestrate.ibm.com",
    rootElementID: "root",
    showLauncher: false,
    deploymentPlatform: "ibmcloud", // Required for IBM Cloud 
    crn: "your-org-crn", // Required for IBM Cloud. Learn how to get the CRN in https://cloud.ibm.com/docs/key-protect?topic=key-protect-retrieve-instance-ID&interface=ui
    chatOptions: {
        agentId: "your-agent-id",
        agentEnvironmentId: "your-agent-env-id",
        onLoad: onChatLoad // Callback function when the chat widget is loaded
    },
};
    setTimeout(function () {
        const script = document.createElement('script');
        script.src = `${window.wxOConfiguration.hostURL}/wxochat/wxoLoader.js?embed=true`;
        script.addEventListener('load', function () {
            wxoLoader.init();
        });
        document.head.appendChild(script);
    });
</script>