공공기관용샘플 화면 · 기관 홈페이지 첫 화면에서 바로 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회로 셉니다. 대화는 챗봇 위젯과 같은 세션을 써서, 같은 페이지의 위젯에서 이어 갈 수 있습니다.