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.hideWidget()

Hides the widget icon from view.

Note: When new messages arrive from operators or smart messages are triggered, the widget will automatically become visible.

To show the widget again, use the showWidget method.

To prevent the widget from appearing briefly on initial page load before being hidden, add RAYCHAT_HIDE_WIDGET_ON_INIT to your installation code.

Copy!

    window.Raychat.hideWidget();

Raychat.showWidget()

Makes the widget icon visible if it was previously hidden.

Note: The widget will stay visible until explicitly hidden using hideWidget() or until the page is reloaded.

To hide the widget, use the hideWidget method.

Copy!

    window.Raychat.showWidget();

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

Using this method, you can display your desired form using the API. You can also track the values entered by your website users using the raychat_form_submission event.

FIELD	TYPE	DESCRIPTION
inputs	array	You can specify the desired form fields through this value. Details of this field are specified in the second table.
message	string	The message displayed with the form.
title	string	Form title.
notSendToServer	boolean	Set to true if you do not want the values received from the user to be saved in the Raychat database.
disableChatbox	boolean	Set to true so that the chatbox is disabled while the user is entering values.
formName	string	The name specified for the form.

inputs field details

FIELD	TYPE	DESCRIPTION
label	string	Label or description of a field.
type	string	Input field type.

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

This event is executed after the form is submitted by your website visitor, and an object containing information such as form type and an array of information entered by the visitor is passed to the callback.

The format of the entered information can be seen in the table below.

FIELD	TYPE	DESCRIPTION
id	number	Field position
label	string	Field label
value	string	Entered value
type	string	Field type

Also, form types are listed in the table below. Note that if a specific name is set in the api for the form, that name is returned.

TYPE	DESCRIPTION
officeHours	Working hours form
notOfficeHours	Non-working hours form
api	Form created by 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

This event is fired when message is received from operator in widget

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>

Widget installation parameters

In this section, you can get the installation code according to the widget's settings such as language and load type

Note: Note that for all sample codes below you should substitute YOUR_WIDGET_TOKEN with the token you receive from installation section of the 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

Note that if no parameter is specified in this section, the widget will be loaded normally. In normal load, the widget will be loaded after loading all parts of your website.

TYPE	VALUE	FIELD	DESCRIPTION
Fast Load	FAST_LOAD	LOAD_TYPE	The widget loads simultaneously with your website.
SEO Friendly	SEO_FRIENDLY	LOAD_TYPE	To prevent the widget from being detected by Google SEO bots and affecting your website's SEO, the widget will be loaded after user interaction.

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-->

Hide Widget on Initial Load

Prevents the widget from appearing briefly on page load before being hidden.

When set to true, the widget will be completely hidden when the page first loads.

Note: You can control widget visibility programmatically using the hideWidget API methods.

FIELD	VALUE	DESCRIPTION
RAYCHAT_HIDE_WIDGET_ON_INIT	true	When true, widget will be hidden on initial page load

Copy!

<!--BEGIN OF RAYCHAT CODE-->
<script type="text/javascript">
  window.RAYCHAT_TOKEN = "YOUR_WIDGET_TOKEN";
  window.RAYCHAT_HIDE_WIDGET_ON_INIT = true;
  (function () {
    var d = document;
    var 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 receive from installation section of the 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-->