공공기관용샘플 화면 · 기관 홈페이지 첫 화면에서 바로 AI 민원 상담이 이어지는 예시입니다. 가상 기관이며 실제 기관 사이트가 아닙니다.

무엇을 도와드릴까요?

찾으시는 민원·서비스·정보를 문장으로 물어보세요. 생성형 AI 가 기관 자료를 근거로 바로 안내해 드립니다.

주민등록번호·연락처·계좌번호 등 개인정보는 입력하지 마세요. 질문 내용은 상담 품질 관리를 위해 기록될 수 있습니다.

자주 묻는 질문

이 화면에서 일어나는 일

민원인은 기관 홈페이지를 떠나지 않고, 기관 홈페이지 모양 그대로 AI 와 상담합니다.

1단계

첫 화면의 질문창에 입력하거나 자주 묻는 질문을 누릅니다.

2단계

같은 페이지가 대화 화면으로 바뀌고, 기관이 등록한 자료를 근거로 답이 실시간으로 이어집니다.

3단계

오른쪽 추천 질문을 누르거나 추가로 질문합니다. 뒤로 가기를 누르면 메인 화면으로 돌아옵니다.

기관 홈페이지에 붙이는 방법 — SDK 3단계

화면은 기관 홈페이지가 그리고, 대화는 GO-Chatbot SDK 가 주고받습니다. 답변 내용은 챗봇 위젯과 같습니다. 레이어로 띄우든 화면을 바꾸든 같은 코드이고, 답을 그리는 위치만 다릅니다.

1. SDK 불러오기 (페이지에 한 번)

챗봇서버 는 기관에 설치된(또는 계약한) 챗봇 서버 주소입니다. 내부망 설치형이면 기관 내부 주소를 씁니다.

<script src="https://챗봇서버/widget/go-chatbot-sdk.js"></script>

2. 질문창과 답변 영역 (모양은 기관 홈페이지에 맞게)

<form id="ask">
  <label for="q">AI 에게 질문</label>
  <input id="q" placeholder="무엇이든 물어보세요">
  <button>AI 검색</button>
</form>
<p>주민등록번호·연락처 등 개인정보는 입력하지 마세요.</p>
<div id="answers" aria-live="polite"></div>   <!-- 레이어 방식이면 팝업 패널 안에 둡니다 -->

3. 질문 보내고 답 그리기

답은 조각조각 실시간으로 옵니다. GoChatbot.renderMarkdown 은 답의 굵게·목록·링크를 안전한 HTML 로 바꿉니다(답 속 HTML 은 실행되지 않음).

<script>
  const bot = GoChatbot.create({ tenantId: "기관-테넌트-ID", serverUrl: "https://챗봇서버" });

  document.getElementById("ask").addEventListener("submit", function (e) {
    e.preventDefault();
    const input = document.getElementById("q");
    const box = document.createElement("div");
    document.getElementById("answers").appendChild(box);
    // 레이어 방식: 여기서 팝업 패널을 연다 / 페이지 전환 방식: 여기서 대화 화면으로 바꾼다

    bot.ask(input.value, {
      onDelta: function (text) { box.innerHTML = GoChatbot.renderMarkdown(text); },
      onError: function (err)  { box.textContent = err.message; }
    });
    input.value = "";
  });

  // 추천 질문: bot.suggestions({ question: "방금 질문" }) → [{ id, text }] · 고르면 bot.askSuggestion(item, {…})
  // 새 상담:   bot.newSession()
</script>
  • 허용 도메인 등록 — 기관 홈페이지 주소(예: www.○○.go.kr)를 챗봇 «허용 도메인» 에 등록하고 챗봇 서버를 다시 시작해야 동작합니다. 등록 전에는 방문자에게 «연결하지 못했습니다» 안내가 나옵니다.
  • 개인정보 — 질문창 가까이에 개인정보 입력 금지 안내를 두세요. 답변 아래에는 «담당 부서 확인» 안내를 두는 것을 권합니다.
  • 웹 접근성 — 질문창에 이름표(label), 답변 영역에 aria-live 를 두면 화면 낭독기로도 상담할 수 있습니다.
  • 질문 1번은 대화 1회로 셉니다. 대화는 챗봇 위젯과 같은 세션을 써서, 같은 페이지의 위젯에서 이어 갈 수 있습니다.
본 화면은 공공기관 홈페이지 적용 예시(샘플)이며 실제 기관 사이트가 아닙니다.
기관명·메뉴·예시 질문은 가상이며, 답변은 설정된 테넌트에 등록된 자료로 만들어집니다. · GO-Chatbot 공공기관용