최근에 우리는 TalkJS 기본 사용자 인터페이스 테마를 성공적으로 맞춤형으로 만들어서 채팅을 우버, Whats App, Linked In과 다른 채팅 도구처럼 보이게 했다.아래의 글에서 우리는 예약을 진행할 것이다.TalkJS 채팅 API를 사용하여 com 채팅을 진행합니다.가입의 파란색 및 흰색 주제를 작성하는 방법을 보여 드리겠습니다.인터넷 채팅.

할 일

테마 편집기를 열고 '예약 채팅' 이라는 새 테마를 만듭니다 gif 테마이 테마를 응용 프로그램과 통합하여 테마 변경 사항을 미리 봅니다.또한 응용 프로그램을 통합하지 않고 HTML 페이지를 쉽게 미리 볼 수 있도록 시작 설명서에 따라 작업을 수행할 수도 있습니다.
다음은 TalkJS 채팅의 기본 주제입니다.

다음은 사용자가 유사한 채팅을 할 때 반드시 실행해야 할 변경 사항의 전체 요약입니다.일반 도메인 이름 형식:

제목을 짙은 파란색으로 변경하고 제목 텍스트를 흰색으로 변경합니다.

머리에서 화신을 제거한다.

제목에서 검색 아이콘을 제거합니다.

머리글 텍스트의 글꼴 크기와 글꼴 시리즈를 각각 normal과 Arial로 변경합니다.

발송자와 수신자의 채팅에서 화신을 제거한다.

채팅에서 시간 스탬프와 메시지 상태를 삭제합니다.

채팅 배경을 기본 흰색에서 다른 색으로 변경합니다. (booking.com에서 Talk JS가 지원하지 않는 그림을 사용하기 때문입니다.)

메시지의 정렬, 스타일 및 채우기를 변경합니다.

클라이언트의 채팅 배경을 파란색으로, 에이전트를 지원하는 채팅 배경을 흰색으로 변경합니다.

채팅의 형식을 변경하여 예약처럼 보입니다.com 음성 거품.

배치

채팅 패널

첫 번째 단계는 테마 편집기에서 레이아웃 부분을 열고 채팅창 밑에 있는 목록을 누르는 것입니다.다음 단계에서는 배경색을 흰색으로 변경합니다.
주의: 이 강좌는 흰색을 선택합니다. 사용자는 모든 색을 설정할 수 있습니다.다음은 프레젠테이션의 그림입니다.

메시지 필드 영역

레이아웃 부분에서 메시지 필드 영역 부분을 열고 배경색을 흰색으로 변경합니다.이렇게 하면 입력 필드 주위 영역의 색이 배경색과 일치하도록 변경됩니다.다음은 이 기능을 보여 주는 그림입니다.

채팅방 관리자

변경할 첫 번째 톱 레벨 구성 요소는 ChatHeader입니다.왼쪽 메뉴에서 ChatHeader 섹션의 스타일시트를 엽니다.다음 CSS를 사용하여 제목 CSS를 변경하고 제목의 배경색을 짙은 파란색으로 설정합니다.이 변경 사항은 가입의 제목처럼 보입니다.com 채팅:

.header {
 display: flex;
 align-items: center;
 height: 4.5rem;
 background-color: #002F7D;
 flex-shrink: 0;
}

다음 단계에서는 제목 색상을 흰색으로 변경하고 제목의 정렬을 설정하고 가입과 유사하게 글꼴 크기를 변경합니다.인터넷 채팅.다음과 같이 제목 CSS를 다음 CSS로 바꿉니다.

​​.title {
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 color: white;
 font-size: 20px;
 padding-left: 30px;
}

또한, 헤더에서 클래스와 클래스를 삭제합니다. 왜냐하면 그것들은 불필요하기 때문입니다.채팅을 예약처럼 보이게 하다.com, ChatHeader 스타일시트에서 다음 행을 제거합니다.
35행(검색 상자).
제36행(기타 조건).
38행에서 40행(왼쪽 이미지).
45행, 49행.
51~57행.
88~93행(이미지 CSS).
101~104 행(검색 작업).
119~156행(코드 검색).
다음은 변경된 모든 제목입니다.

사용자 정보

다음에 변경할 최상위 어셈블리는 UserMessage입니다.가입에 따라 변경하려면 UserMessage 스타일시트를 열어야 합니다.com 채팅 레이아웃.사용자는 다음과 같이 54번째 행을 수정하여 화신을 숨겨야 합니다.

<t:set showAvatars="{{true}}"/> to  <t:set showAvatars="{{false}}"/>

이 밖에 파일에서 화신 코드를 삭제하기 위해 58줄에서 62줄을 삭제한다.
다음 단계는 채팅에서 시간 스탬프와 메시지 전달 상태/표시 상태를 삭제합니다.73 행의 MessageBody 태그를 변경하고 파일에서 다음 코드를 제거합니다.

timestamp="{{ timestamp }}" floatTimestamp="auto" showStatus="{{ sender.isMe }}"

다른 하나는 예약처럼 보이도록 하기 위해 파일에 아래의 CSS를 추가해서 삼각형을 추가하는 것이다.com 채팅 버블:
다음은 보낸 사람이 음성 기포를 변경하는 CSS입니다.

.by-me .message:before {
 content: "";
 width: 0px;
 height: 0px;
 position: absolute;
 border-left: 10px solid #379EE0;
 border-right: 10px solid transparent;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 right: -20px;
 top: 40px;
}

다음은 수신기가 음성 기포를 변경하는 CSS입니다.

.by-other .message:before {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-right: 10px solid  #D3D3D3;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  right: 189px;
  top: 30px;
}

새것으로 바꾸다.나야.메시지 CSS는 가입처럼 보이도록 배경색, 여백 및 프레임을 변경합니다.com 채팅:

.by-me .message {
   background-color: #379EE0;
   color: #fff;
   margin-right:20px;
   border-color:#379EE0;
}

새것으로 바꾸다.또 하나.채팅방 배경색 및 왼쪽 여백에 대한 메시지 CSS 변경하기

.by-other .message {
   background-color: #D3D3D3;
    margin-left:20px;
}

다음은 음성 풍선 스타일 및 풍선의 경계에 맞춰 메시지 CSS를 교체하는 것입니다.또한 채팅의 글꼴 시리즈, 글꼴 크기와 글꼴 크기를 변경하여 예약과 유사하게 합니다.인터넷 채팅.
참고: ChatPanel 섹션에서 글꼴 크기 및 글꼴 패밀리를 설정하여 레이아웃 섹션에서 이러한 내용을 변경할 수 있습니다.

.message {
  border-color: #E7ECEE;
 background-color: #E7ECEE;
 color: #111;
 padding: 20px;
 font-weight: 900;
 font-family: arial;
 position:relative;
  white-space: normal;
  border-radius: 0.5rem;
  border-width: 0px;
  border-style: solid;
  word-wrap: break-word;
  position: relative;
  display: inline-block;
  max-width: calc(100% - 15rem - 0.25rem - 0.25rem);
  font-size: 16px;
  font-weight:normal;
  padding: 0px;
}

이러한 모든 변경 사항과 교체를 수행하여 채팅방은 다음과 같이 보입니다.

다음gif는 채팅을 예약하는 기능 설계를 보여 준다.