# Open Graph

Open Graph is a function that allows you to configure the preview screen of any Internet address.
The OpenGraph protocol was first created by Meta (formerly Facebook), and its usefulness and ease of implementation led to its use in many platforms.
The tags used are og:url (URL to be linked), og:type (specifying the type for web/app), og:title (the title of the document), and og:description (the description), and og:image (a thumbnail image of the document).
The principle of operation is to first visit the URL entered in the vchatcloud server at the moment of pasting the URL in the chat room, collect the open graph data on the web page, and receive and display the data in the form of a preview.

vchatcloud provides the open graph function as above and can be easily implemented through the library.

# How to use the library

The library does not have any presets that need to be issued an API KEY or set in the CMS. Please read the information below and proceed.


  1. Follow the contents of Overview.

  2. Write the appropriate code in script.js referring to the Methods below.

const openGraph = new OpenGraph();

// when you receive a new message
channel.onNotifyMessage = function(event) {
  openGraph.getOpenGraph(event.message, (html, url, data) => {
    // Write a callback to use when fetching data.
    // * The callback is only fired when the user-entered message contains a URL.
  });
};
1
2
3
4
5
6
7
8
9

  • parameter value none

# Methods

  • getOpenGraph(url, callback)
Value Type Description
message* String User-entered message
callback* Function A callback function that executes html, url, and data as arguments
callback function parameter
Value Type Description
html String html string to be inserted into chat room
url String url entered by the user
data Object OpenGraph information received from server - (image, title, description, host)
Copyright 2022. E7Works Inc. & JOYTUNE Corp. All Rights Reserved.