CSS로 깃플챗 디자인 쉽게 바꿔보기!
안녕하세요,
깃플입니다 🙂
오늘은 CSS를 이용해
깃플챗을 내 브랜드에 맞게, 더 예쁘게 변경해보겠습니다.
CSS가 나왔다고 긴장하지 않으셔도 됩니다.
정말 쉽게 기본적인것들만 바꿔볼 예정이니까요!
우선 깃플 워크스페이스에 접속합니다.
접속하신 후 채팅앱을 클릭해주세요.
그리고 스타일 변경을 사용함으로 변경해주세요.
처음 사용함을 누르면
이렇게 빈칸으로 보이실텐데요,
/**
* Gitple Custom Styles
* Must to use “!important” for all attributes.
*/
이 볼드처리 된 부분을 복사 붙여넣기 후 저장하기를 눌러주세요!
편하게 진행하기 위해
스타일 변경창을 길~게 늘려주세요
우선 고객들에게 가장 먼저 보일 메인 색상을 변경해볼까요?
깃플챗 가이드👈에 들어가신 후
4.스타일 적용하기를 보시면 됩니다.
/*헤더 배경 색상 변경 */이라고 써있는 부분이 보이시나요?
/* 헤더 배경색상 변경 */
.gp-header {
background-color: #3F69AA !important;
}
이 부분인데요,
깃플챗은 초록색이니까 초록색 빼고 제가 좋아하는 분홍색으로 바꿔보겠습니다
색상코드는
에서 확인하실 수 있습니다.
분홍색으로 설정을 하고 변경된 것을 확인해보겠습니다.
원하는 연분홍색으로 잘 바뀌었네요.
자 그럼 분홍색에 맞춰 다른 것들도 변경해보도록 하겠습니다.
저는 우선 버튼 색을 바꾸고싶은데요,
다시 깃플 가이드로 들어가서
쭉 내려가니 Home스타일 변경에 제가 변경하고 싶은 버튼이 있네요!
제가 변경하고 싶은 버튼은 8번이니 8번 버튼을 바꾸는 스크립트를 추가해주세요.
이걸 복사해서
복사, 붙여넣기 후 색상 코드만 변경해줍니다.
저장을 누른 후 확인해보면
역시 원하는 색상으로 잘 바뀌었네요 😊
첫 화면은 바꿨으니
상담 화면을 한번 바꿔보도록 하겠습니다.
가이드는
깃플챗 가이드 👈를
확인해보시면 되는데요,
우선 상담사와 봇의 말풍선부터 바꿔보겠습니다.
가이드에서는 이부분입니다.
아무것도 세팅을 하지 않으면
이렇게 보여지는데요,
저 상담사&챗봇의 말풍선을 한번 바꿔보겠습니다.
가이드 복사 후 채팅앱 스타일에 붙여넣기 해주시고,
원하는 스타일로 변경해주세요.
background-color는 말풍선 색상,
border-radius는 말풍선 모서리의 반지름
border는 테두리를 의미합니다.
저는 이번에도 분홍색 계열로 깔맞춤 해서 바꿔보겠습니다
저장하기를 꼭 눌러주시고!
제가 원하는 대로, 분홍색과 동그란 말풍선으로 바꼈네요.
그럼 사용자 메시지 영역을 바꿔보겠습니다.
지금은 제가 기본 설정을 노란색으로 했기 때문에 노란색으로 뜨네요.
역시 가이드에서
사용자 메시지 영역 스크립트를 복사하고
워크스페이스에서 채팅앱 스타일 변경에 붙여넣기 해주세요.
사용자는 똑같이 둥글기를 맞춰주고
회색 박스에 분홍색 글씨로 바꿔보았습니다 🙂
오늘은 제 취향에 맞게 메인, 상담 메시지 색상 등을 변경해보았습니다.
어떠셨나요?
CSS를 몰라도 쉽게 변경할 수 있지 않았나요?
혹시 하다가 어려운 점이 있으시면 언제든 깃플에 문의를 눌러주세요!
예쁘게 변경하실 수 있도록 도와드리겠습니다!
