מדריכים


שילוב צ'טבוט באתר שלך


לאחר שהקמת צ'אטבוט, תרצה לשלב אותו באתר שלך כך שלקוחותיך יכולו להשתמש בו.


wrodpress logo רגע, יש לך אתר וורדפרס? יש לנו פלאג אין מוכן בשבילך! צרו קשר לקבלו


מבט כללי

הצ'אטבוט של liberty-chatbot עובד למעשה על קריאות API שמתרחשות ברקע. שיטה זאת מאפשרת לך גמישות רבה בנושא השילוב באתר, ואתה יכול לשנות את המראה וההתנהגות בעצמך.

בעזרת iframe

HTML

לצורך השילוב יש להדביק את הקוד HTML באתר שלך בכל מקום שתרצה שהצ'אטבוט יופיע.

<div id="liberty-chatbot-chat" data-id="YOUR_CHATBOT_ID"><div id="liberty-chatbot-chat-wrapper"><div id="liberty-chatbot-chat-header"><span id="liberty-chatbot-chat-close"><img src="/en/images/chat/liberty-chatbot-chat-close.png"></span><div id="liberty-chatbot-chatbot-title"></div></div><div id="liberty-chatbot-chat-box"><div id="liberty-chatbot-chat-scroll"></div></div><div id="liberty-chatbot-writing-area-div"><input id="liberty-chatbot-writing-area" name="content" type="text" autocomplete="off" value="" autofocus><img id="liberty-chatbot-send_examine-btn" src="/images/chat/send_right.png" alt="send"></div></div></div>

CSS

Liberty-Cahtbot CSS

<link rel="stylesheet" type="text/css" href="https://liberty-chatbot.space/api/1.0.5/css/liberty_chatbot.min.css">


שילוב קיבצי JavaScript

הצ'אטבוט נשען על ספריית jQuery ( גרסה 3 )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

במידה והאתר שלך ממילא משתמש בו אין צורך לקרוא לו שוב.

יש לשלב JS - ניתן לקרוא לו מפלטפורמה - או להוריד ולהוסיף אותו לקובצי ה JS שלך.


Liberty-Chatbot js

<script src="https://liberty-chatbot.space/api/1.0.5/js/libertyChatbot.min.js"></script>
<script id="liberty-chatbot-bot-chat-template" type="template"><div class="liberty-chatbot-chat-block liberty-chatbot-bot-chat-block" data-bot_mode="&&bot_mode&&" style="direction: ltr;" ><div class="liberty-chatbot-talker"><img src="https://liberty-chatbot.space/images/site/logo_very_small.png" alt="robot"><div class="liberty-chatbot-bot-name">&&bot_name&&</div></div><div class="liberty-chatbot-chat-space"><div class="liberty-chatbot-talk-bubble liberty-chatbot-tri-right liberty-chatbot-round liberty-chatbot-left-in"><div class="liberty-chatbot-talktext">&&content&&</div></div></div></div></script><script id="liberty-chatbot-user-chat-template" type="template"><div class="liberty-chatbot-chat-block liberty-chatbot-client-chat-block" style="direction: rtl;"><div class="liberty-chatbot-talker"><img src="https://liberty-chatbot.space/images/chat/liberty_chatbot_user.png" alt="user"><div class="liberty-chatbot-client-name"> &&client_name&& </div></div><div class="liberty-chatbot-chat-space"><div class="liberty-chatbot-talk-bubble liberty-chatbot-tri-right liberty-chatbot-round liberty-chatbot-right-in"><div class="liberty-chatbot-talktext">&&content&&</div></div></div></div></script><script id="liberty-chatbot-upload-file-template" type="template"><form enctype="multipart/form-data" class="liberty_chatbot_upload_form"><label class="liberty-chatbot-upload-file-label"> Browse <input type="file" class="liberty_chatbot_upload_file" name="liberty_chatbot_upload_file" accept="image/*;capture=camera" hidden></label><div class="liberty_chatbot_upload_file_preview"></div></form></script>