API | Raychat

client_api

Raychat documentation for developers

By using Raychat APIs, you can coordinate your system or website more with Raychat. For example, you can display the information of your website users in the Raychat conversation panel. In the following, you can see the APIs that have been released so far. Raychat is always updating, so stay tuned for new APIs :).

Create a website

By using this API, you can register in RayChat. This section is mostly used for the site builder and store builder systems that intend to automatically create a RayChat account for every user who registers in their system and places the code on the site.

* To use this part, first create an app through this link and get your API key.

ROUTE	METHOD
https://api.raychat.io/v1/api/site	POST

Sent values

FIELD	TYPE	DESCRIPTION
apiKey	string	The key you received when creating the application in
site	string	The address of the site you want to register in Raychat
siteTitle	string	The title of the site you want to register in Raychat
email	string	Email of the website administrator
password	string	The password
name	string	Name of the website administrator
phone	string	The phone number of the website administrator

Return values

FIELD	TYPE	DESCRIPTION
message	string	The message returned from the server
status	int	Status
code	string	Raychat code to put on the website
user	object	Created user information
token	string	Website token
url	string	Address of Raychat management panel
webAppUrl	string	The address of the web application under Raychat

* The response is returned as JSON.

* If an error occurs, the reason will be explained in the answer.

* Status equal to 1 means successful registration.

Copy!

// NodeJs Example
    request.post({
    url:'https://webapp.raychat.io/api/site',
    form: {
      apiKey:'Your Api Key',
      site:'https://example.com',
      siteTitle:' Example Title',
      email:'tech@raychat.io',
      password: 'Password',
      name:'Ehsan Younesi',
     phone:'09000000000'
    }
   }, function(err,httpResponse,body){
     /* ... */
   });

Raychat documentation for user-side developers

The user-side API allows you to manage the widget that is displayed to the user. You can use it to manage the chat page and also send user information to the Raychat application. (For example, you can send the information of a user who has logged into your site to Raychat so that it can be displayed in the application and you can access it later in the archive).

Note: All the functions and events that will be explained below must be written according to the instructions on the right (inside the raychat_ready event).

Copy!

    window.addEventListener('raychat_ready', function (ets) {
      // function or event 
    });

Raychat.setStyle()

Using this function, you can make changes to the appearance of the RayChat chat widget icon.

FIELD	TYPE	DESCRIPTION
backgroundColor	string	The background color of the widget icon
borderRadius	string	The edge mode of the widget icon
width	string	The width of the widget icon
height	string	The height of the widget icon
boxShadow	string	Adding Shadow Effect to Widget Icon

Copy!

    window.Raychat.setStyle({
      backgroundColor : '#000',
      borderRadius : '50%',
      width : '70px',
      height : '70px',
      boxShadow : '0px 1px 5px 0px rgba(0,0,0,0.75)'
    });

Raychat.setPosition()

Using this function, you can change the position of the chat widget icon. Note that in order to change the position of the widget correctly, be sure to send the 4 mentioned positions, so that at most two positions have values and the rest of the fields have 'auto' values.

FIELD	TYPE	DESCRIPTION
top	string	The distance from the top
right	string	The distance from the right
bottom	string	The distance from the bottom
left	string	The distance from the left

Copy!

    window.Raychat.setPosition({
      top: 'auto',
      right : 'auto',
      bottom : '15px',
      left : '15px'
    });

Raychat.setUser()

Using this function, you can send the information of the user who has logged into your website to Raychat.

FIELD	TYPE	DESCRIPTION
email	string	Email of the logged-in user
name	string	Name of the logged-in user
about	string	About the logged-in user
phone	string	The phone of the logged-in user
avatar	string	The photo of the logged-in user
updateOnce	boolean	Whether to update user information every time this function is called

Copy!

    window.Raychat.setUser({
      email: 'tech@raychat.io',
      name: 'Ehsan Younesi',
      about: 'about me :)',
      phone: '09123456789',
      avatar: 'https://webapp.raychat.io/ehsan.png',
      updateOnce: true
    });

Raychat.getUser()

Using this function, you can get the visitor information that is currently on the website.

Return values

KEY	VALUE TYPE	DESCRIPTION
id	string	User id
name	string	Username
email	string	Email
avatar	string	The user's photo
online	string	The status of the user
createdAt	date	The date the user was created
metadata	object	More data
browser	object	The user's browser information
phone	string	The user's phone number
about	string	User information

Copy!

    var user = window.Raychat.getUser();
    //example user object 
    { id: '5992bc6d9e737c900e3058d3',
      name: 'Ehsan Younesi',
      email: 'tech@raychat.io',
      avatar: 'https://webapp.raychat.io/ehsan.png',
      online: true,
      createdAt: 2017-08-15T09:18:37.904Z,
      metadata: {
       userId: "2", // String
       createdAt: "2018-09-29", // Date
       totalPaid: 200000, // Number
       isActive: true // Boolean
      },
     browser : {
       "name" : "Chrome",
       "ver" : "60.0.3112.90",
       "os" : "Windows",
       "mobile" : false
      },
     phone: '0912345678',
     about: 'hello :)'
    }

Raychat.loadUser()

With this function, you can load the users who enter the user panel in your system and keep their conversations permanent and stable; When the user is successfully loaded, the raychat_new_user_loaded event is executed.

Note: You can use the getUser function to get the user's ID.

Note: Be sure to note that by loading a new user, the current user's information (conversations and other items) will be permanently unavailable if you do not save the user's ID in the database.

FIELD	TYPE	DESCRIPTION
userId	string	User id

Copy!

    window.Raychat.loadUser(userId);

Raychat.unloadUser()

It causes all user information to be deleted from the browser, and if the user visits the site again, he will be recognized as a new user.

Note: To apply the changes, after calling this function, the user's browser must be reloaded.

Note: If you do not save the user ID in the database before calling this function, it will be impossible to reload this user.

Copy!

    window.Raychat.unloadUser();

Raychat.sendOfflineMessage()

Sending messages to the user through the RayChat widget.

Note: This message is only displayed on the user's side and the operator is not able to see this message, and it is not considered a conversation, and it is deleted by refreshing the screen.

Copy!

    window.Raychat.sendOfflineMessage('سلام وقت بخیر');

Raychat.openWidget()

You can open the chat widget using this function.

Copy!

    window.Raychat.openWidget();

Raychat.closeWidget()

You can close the chat widget using this function.

Copy!

    window.Raychat.closeWidget();

Raychat.toggle()

If the chat widget is open when calling this function, the widget will be closed or vice versa.

Copy!

    window.Raychat.toggle();

Raychat.animate()

Customize chat widget icon animation mode. This will draw the user's attention to the widget, and as a result, the user will be more likely to open up.

ANIMATIONS
bounce
wobble
tada
shakeX
shakeY
headShake
rubberBand
swing
jello
rotateIn
pulse
heartBeat
flip

Copy!

    window.Raychat.animate('tada');

Raychat.isWidgetOpen()

Using this function, you can determine whether the check tool is open or not.

RESULT	ANIMATIONS
true	is open
false	is closed

Copy!

    window.Raychat.isWidgetOpen();

Events

Using these events, you can react to user behavior. For example, when the user registers his email in the news section, show him a message. This section is always being updated and new features and events will be added according to users' needs and requests.

raychat_user_profile_updated event

This event is executed when the user's information is updated, for example, when the user registers his email in the news section.

Copy!

    window.Raychat.on('raychat_user_profile_updated', function (user) {
    });

open event

This event is fired when the user opens the chat widget.

Copy!

    window.Raychat.on('open', function (s) {
    });

close event

This event is fired when the user closes the chat widget.

Copy!

    window.Raychat.on('close', function (s) {
    });

SendForm event

با استفاده از این متد میتوانید فرم مورد نظر خود را با استفاده از API نمایش دهید. همچنین میتوانید مقادیر وارد شده توسط کاربر وبسایت خود را با استفاده از ایونت raychat_form_submission رهگیری کنید

FIELD	TYPE	DESCRIPTION
inputs	array	.فیلدهای فرم موردنظر را این طریق این مقدار میتوانید مشخص کنید. جزئیات این فیلد در جدول دوم مشخص شده است
message	string	پیامی که همراه با فرم نمایش داده میشود
title	string	عنوان فرم
notSendToServer	boolean	قرار دهید true درصورتی که نخواهید تا مقادیر دریافتی از کاربر در دیتابیس رایچت ذخیره شوند مقدار این فیلد را برابر
disableChatbox	boolean	قرار دهید true تا زمان وارد کردن مقادیر توسط کاربر غیرفعال باشد میتوانید مقدار این فیلد را برابر chatbox درصورتی که بخواهید تا
formName	string	نامی که برای فرم مشخص میشود

جزئیات فیلد inputs

FIELD	TYPE	DESCRIPTION
label	string	برچسب یا توضیحات یک فیلد
type	string	نوع فیلد ورودی

Copy!

    window.Raychat.sendForm({
          // type can be number, phone, email, name and string (custom fields)
          inputs: [
            {
                "label": "سن",
                "type": "number"
            },
            {
                "label": "تلفن",
                "type": "phone"
            },
            {
              "label": "ایمیل",
              "type": "email"
            },
            {
              "label": "فیلد دلخواه",
              "type": "string"
            }
        ],
            message: "اطلاعات را وارد کنید",
            title: "عنوان فرم",
            notSendToServer: false,
            disableChatbox: false,
            formName: "customForm"
        })

Raychat form submission event

این رویداد پس از تایید فرم توسط بازدید کننده وبسایت شما اجرا میشود و یک آبجکت حاوی اطلاعاتی همچون نوع فرم و آرایه ای از اطلاعات وارد شده توسط بازدیدکننده به کال بک پاس داده میشود.

فرمت اطلاعات وارد شده در جدول زیر قابل مشاهده هستند

FIELD	TYPE	DESCRIPTION
id	number	موقعیت فیلد
label	string	برچسب فیلد
value	string	مقدار وارد شده
type	string	نوع فیلد

همچنین انواع فرم در جدول زیر آورده شده است. توجه کنید درصورتی که نام مشخصی در api برای فرم تعیین شود آن نام برمیگردد.

TYPE	DESCRIPTION
officeHours	فرم زمان‌های کاری
notOfficeHours	فرم زمان‌های غیرکاری
api	api فرم ایجاد شده توسط

Copy!


        window.Raychat.on('raychat_form_submission', function ({detail}) {
          // officeHours, notOfficeHours, api
          const formName = detail.formName;
          const inputValues = detail.values;
        });

raychat_new_user_loaded event

This event is executed when you load a user using the loadUser method.

Copy!

    window.Raychat.on('raychat_new_user_loaded', function (s) {
    });

raychat_sendMessage

This event is fired when user sends message in widget

FIELD	TYPE	DESCRIPTION
type	string	message type
content	string	message content

Copy!

    window.Raychat.on('raychat_sendMessage', function (d) {
            // your code here:
            // const detail = d.detail
            // ..
    });

raychat_getMessage

FIELD	TYPE	DESCRIPTION
type	string	message type
content	string	message content

Copy!

    window.Raychat.on('raychat_getMessage', function (d) {
          // your code here:
          // const detail = d.detail
          // ..
    });

Tag Manager events used in the service

By providing various events, Raychat allows you to receive all widget behavior and, if necessary, send it to other external services according to your business needs. In this section, you can see examples of receiving and sending data to the Google Tag Manager service. More Info

Note: All the functions and events that will be explained below must be written according to the instructions on the right (inside the raychat_ready event).

Copy!

    window.addEventListener('raychat_ready', function (ets) {
            window.Raychat.on("close", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_close', 
                  // other options
              }); 
          }); 
    });

Tracking the widget opening event in the tag manager

With the following code, you can track the number of times the widget is opened on your website

Copy!


        <!-- Event listener for Raychat widget's open event --> 
        <script> 
          window.Raychat.on("open", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_open', 
                  // other options
              }); 
          }); 
        </script>

Widget close event tracking in tag manager

With the following code, you can track the frequency of closing the widget on your website

Copy!


        <!-- Event listener for Raychat widget's close event --> 
        <script> 
          window.Raychat.on("close", function () { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_close', 
                  // other options
              }); 
          }); 
        </script>

Tracking the event of sending a message by the user

With the following code, you can track the sending of messages on your website

Copy!

 
        <!-- Event listener for Raychat widget's send message event --> 
        <script> 
          window.Raychat.on("raychat_sendMessage", function (d) { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_sendMessage', 
                  // other options
              }); 
          }); 
        </script>

Tracking the message receiving event in Tag Manager

With the following code, you can track the receipt of the message

Copy!


        <!-- Event listener for Raychat widget's get message event --> 
        <script> 
          window.Raychat.on("raychat_getMessage", function (d) { 
              window.dataLayer = window.dataLayer || []; 
              window.dataLayer.push({ 
                  'event': 'raychat_getMessage', 
                  // other options
              }); 
          }); 
        </script>

Note: Note that for all sample codes below you should substitute `YOUR_WIDGET_TOKEN` with the token you recieve from installation section of dashboard

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
            window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

Widget language

According to the desired language for your widget, you can use the following values. Use it and put it in the installation code

LANG	VALUE	FIELD
Persian	fa	RAYCHAT_WIDGET_LANG
English	en	RAYCHAT_WIDGET_LANG
Arabic	ar	RAYCHAT_WIDGET_LANG
Turkish	tr	RAYCHAT_WIDGET_LANG
Kurdish	ku	RAYCHAT_WIDGET_LANG

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.RAYCHAT_WIDGET_LANG ="en";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

Widget load type

Using the following parameters, you can load your code faster or more suitable for SEO

توجه کنید که اگر هیچ پارامتری در این قسمت مشخص نشود آنگاه ابزارک به صورت معمولی لود خواهد شد. در لود معمولی، ابزارک پس از لود همه‌ی قسمت‌های وبسایت شما لود خواهد شد.

TYPE	VALUE	FIELD	DESCRIPTION
Fast Load	FAST_LOAD	LOAD_TYPE	ابزارک همزمان با وبسایت شما لود میشود
SEO Friendly	SEO_FRIENDLY	LOAD_TYPE	برای جلوگیری از تشخیص ابزارک توسط ربات‌های سئوی گوگل و تاثیر آن روی سئوی وبسایت شما، ابزارک پس از تعامل کاربر لود خواهد شد

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.LOAD_TYPE = "SEO_FRIENDLY";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

Always show fullscreen

By using this parameter, you can always have the widget as a full page on your website

FIELD	VALUE
RAYCHAT_ALWAYS_FULLSCREEN	true

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          window.RAYCHAT_ALWAYS_FULLSCREEN = true;
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script>
        <!--END OF RAYCHAT CODE-->

Installing widgets on various frameworks

Below is how to install Raychat on different frameworks.

Note: Note that for all sample codes below you should substitute `YOUR_WIDGET_TOKEN` with the token you recieve from installation section of dashboard

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

Installing widgets on the React framework

To install RayChat on the React framework, you can put the installation code in index.html code located inside public folder

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->

Installing widget on the Next.js framework

To install the widget on the next.js framework, you can put the installation code as follows in the app.js_ file of your program

Copy!


        <Script
          id="raychat-widget"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: "
                window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
                (function () {
                    const d = document;
                    const s = d.createElement("script");
                    s.src = "https://widget-react.raychat.io/install/widget.js";
                    s.async = true;
                    d.getElementsByTagName("head")[0].appendChild(s);
              
                })();",
          }}
        />

Installing widget on the VueJS framework

To install Raychat on the Vue.js framework, you can put the installation code in the index.html file located in the public folder and before the end of the head tag

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
        window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
          (function () {
              d = document;
              s = d.createElement("script");
              s.src = "https://widget-react.raychat.io/install/widget.js";
              s.async = 1;
              d.getElementsByTagName("head")[0].appendChild(s);
          })();
        </script> 
        <!--END OF RAYCHAT CODE-->

Installing widget on the AngularJS framework

To install RayChat on the Angular framework, you can put the installation code in the index.html file located in the src folder and before the end of the head tag

Copy!


        <!--BEGIN OF RAYCHAT CODE-->
        <script type="text/javascript">
          window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
            (function () {
                d = document;
                s = d.createElement("script");
                s.src = "https://widget-react.raychat.io/install/widget.js";
                s.async = 1;
                d.getElementsByTagName("head")[0].appendChild(s);
            })();
        </script> 
        <!--END OF RAYCHAT CODE-->