2. 화면 구성 - (5) 고객센터 - 실시간 채팅 상담

[1] 개요

  1. URL

    - HOST/live_chat

  2. 구성

    - 카카오톡 채널 API 사용

    - QR code를 스마트폰으로 찍으면, 스마트폰 카카오톡 실행

    - 실시간 상담하기 버튼 클릭 시 PC 카카오톡 실행

[2] CODE

  1. HTML

    - 카카오톡 채널 API에서 복사한 코드

/templates/live_chat.html

<div class="card" style="margin: 100px auto; width: 18rem;">
    <div>
        <img src="/static/img/qrcode_350.png" class="card-img-top" alt="...">
    </div>
    <div class="card-body">
        <h5 class="card-title">IoT_3distancing</h5>
        <p class="card-text">IoT_3distancing 입니다. 궁금한 내용이 있으면 채팅창에 메시지를 입력해주세요.</p>
        <a href="http://pf.kakao.com/_Iqximb/chat" class="btn btn-primary">실시간 상담하기</a>
    </div>
</div>

  2. CSS

    - bootstrap CSS 사용

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  3. JavaScript

    - 특별히 적용된 JS는 없는 것으로 보임

  4. Application

    - 실시간 채팅 상담 화면(live_chat.html)으로 이동

/web/views.py -> class MyView(View)

@request_mapping("/live_chat", method="get")
def live_chat(self, request):
    return render(request, 'live_chat.html');

- 끝 -