examples/browserExampleMethods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous">
    <script defer type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>    
    <title>API HTML5</title>
    <style>
        .button {
            border: none;
            color: white;
            padding: 16px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
        }

        .buttonGreen {
            font-size: 16px;
            background-color: hsla(122, 39%, 49%, 1);
            color: #fff;
            border: 2px solid #4CAF50;
            border-radius: 8px;
            box-shadow: 0 0 4px #999;
        }

        .buttonGreen:hover {
            background-color: #4CAF50;
            color: white;
        }

        span {
            font-size: 12px;
        }

        .form-wrapper {
            display: flex;
            padding: 10px 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #cacaca;
            gap: 50px;
        }

        .date-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
        }

        input {
            min-width: 300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>WhatsApp client browser example</h1>
<!-- Instance Date 
            To send a message or to execute some other Green-API method, 
            you have to have the WhatsApp account in the phone application 
            to be authorized. To authorize your account please go to the personal 
            area and scan a QR-code using the WhatsApp application. 
            https://console.green-api.com/instanceList/
-->
        <form class="form-wrapper">
            <div class="date-container">
                <h2 class="section-title">Instance data</h2>
                <label for="idInstance">Id Instance:</label>
                <input required type="text" id="idInstance" name="idInstance">
                <label for="apiTokenIsntance">API Token:</label>
                <input required type="text" id="apiTokenIsntance" name="apiTokenIsntance" placeholder="c40205cffda74409be1f66819b47116...">
                <a href="https://console.green-api.com/instanceList">To authorize your account please go to the personal area and scan a QR-code using the WhatsApp application</a>
            </div>
        </form>

<!-- Send message 
    You can read more about this metods here
    https://green-api.com/en/docs/api/sending/SendMessage/
-->
        <form class="form-wrapper">
            <div class="date-container">
                <h2 class="section-title">Send Message</h2>
                <label for="phoneNumber">Phone Number:</label>
                <input required type="tel" id="phoneNumber" name="phoneNumber" value="" placeholder="77076665544">
                <span>if you sending on mobile phone use @c.us or if you sending in group @g.us</span>
                <label for="messageText">Message:</label>
                <input required type="text" id="messageText" name="messageText" value="Hello world!">
                <a href="https://green-api.com/en/docs/api/sending/SendMessage/"> You can read more about this metods here</a>
            </div>
            <div class="date-container">
                <button id="SendWhatsAppBtn" type="button" class="button buttonGreen">Send Message</button>
            </div>
            <div class="date-container"><p id="result-text-sendMessage"></p></div>
        </form>

<!-- Send file from local 
    You can read more about this metods here
    https://green-api.com/en/docs/api/sending/UploadFile/
-->
        <form class="form-wrapper" id="upload-form">
            <div class="date-container">
                <h2 class="section-title">Upload file,  method not work</h2>
                <label for="file-input">Choose a file to upload:</label>
                <input type="file" id="file-input" name="file"/>
                <label for="phoneNumber">Phone Number:</label>
                <input required type="tel" id="phoneNumber-upload" name="phoneNumber" value="" placeholder="77076665544">
                <label for="messageText">Message:</label>
                <input required type="text" id="messageText-upload" name="messageText" value="Hello world!">
                <a href="https://green-api.com/en/docs/api/sending/UploadFile/"> You can read more about this metods here</a>            </div>
            <div class="date-container">
                <button id="SendFileWhatsAppBtn" type="button" class="button buttonGreen">Send File</button>
            </div>
            <div class="date-container"><p id="result-text-uploadFile"></p></div>
        </form>

<!-- Send file by URL 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/sending/SendFileByUrl/
-->
        <form class="form-wrapper" id="sendFileByUrl">
            <div class="date-container">
                <h2 class="section-title">Upload file by url</h2>
                <label for="fileByUrl">Past your link to file in to input</label>
                <input type="text" id="fileByUrl" name="fileUrl" placeholder="Write your URL">
                <input type="text" id="fileName" name="fileExtention" placeholder="Write your file name and file extention">
                <label for="phoneNumber">Phone Number:</label>
                <input required type="tel" id="phoneNumber-uploadByUrl" name="phoneNumber" value="" placeholder="77076665544">
                <label for="messageText">Message:</label>
                <input required type="text" id="messageText-uploadByUrl" name="messageText" value="Hello world!">
                <a href="https://green-api.com/en/docs/api/sending/SendFileByUrl/"> You can read more about this metods here</a>
            </div>
            <div class="date-container">
                <button id="SendFileByUrlWhatsAppBtn" type="button" class="button buttonGreen">Send File by URL</button>
            </div>
            <div class="date-container"><p id="result-text-sendFileByUrl"></p></div>
        </form>

<!-- Send file by Upload    Not working!
    You can read more about this metods here    
    https://green-api.com/en/docs/api/sending/SendFileByUpload/
-->
<form class="form-wrapper" id="sendFileByUpload">
    <div class="date-container">
        <h2 class="section-title">Upload file by upload</h2>
        <label for="file-input">Enter the file path:</label>
        <input type="text" id="file-input-upload" name="filePath-upload" placeholder="C://ProgramFiles/{file}"/>
        <a href="https://green-api.com/en/docs/api/sending/SendFileByUrl/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="SendFileByUploadWhatsAppBtn" type="button" class="button buttonGreen">Send File by upload</button>
    </div>
    <div class="date-container"><p id="result-text-sendFileByUpload"></p></div>
</form>

<!-- Create group 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/CreateGroup/
-->
<form class="form-wrapper" id="createGroup">
    <div class="date-container">
        <h2 class="section-title">Create group</h2>
        <label for="fileByUrl">Write name of your group</label>
        <input type="text" id="groupName" name="groupName" placeholder="Write your group name">
        <input type="text" id="chatIds" name="chatIds" placeholder="Enter group member numbers ">
        <button id="chatPlus" type="button" class="btn buttonGreen btn-sm">Добавить чат</button>
        <a href="https://green-api.com/en/docs/api/groups/CreateGroup/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="create-group" type="button" class="button buttonGreen">Create Group</button>
    </div>
    <div class="date-container"><p id="result-text-createGroup"></p></div>
</form>
<!-- Update group name 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/UpdateGroupName/
-->
<form class="form-wrapper" id="UpdateGroupName">
    <div class="date-container">
        <h2 class="section-title">Update group name</h2>
        <label for="groupName">Write name of your group</label>
        <input type="text" id="groupName-upadteName" name="groupName" placeholder="Write your group name">
        <input type="text" id="groupId-updateName" name="chatId" placeholder="Enter group id ">
        <a href="https://green-api.com/en/docs/api/groups/UpdateGroupName/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="updateGroupName" type="button" class="button buttonGreen">Update group name</button>
    </div>
    <div class="date-container"><p id="result-text-UpdateGroupName"></p></div>
</form>
<!-- Get Group Data method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/GetGroupData/
-->
<form class="form-wrapper" id="GetGroupData">
    <div class="date-container">
        <h2 class="section-title">Get group data</h2>
        <label for="groupName">Write id of your group</label>
        <input type="text" id="groupId-GetGroupData" name="groupName" placeholder="Write your group id">
        <a href="https://green-api.com/en/docs/api/groups/GetGroupData/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="getGroupData" type="button" class="button buttonGreen">Get group data</button>
    </div>
    <div class="date-container"><p id="result-text-GetGroupData"></p></div>
</form>
<!-- Set group admin method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/SetGroupAdmin/
-->
<form class="form-wrapper" id="SetGroupAdmin">
    <div class="date-container">
        <h2 class="section-title">Set Group Admin</h2>
        <label for="groupName">Write id of your group</label>
        <input type="text" id="groupId-setAdmin" name="groupName" placeholder="Write your group id">
        <input type="text" id="chatId-setAdmin" name="groupName" placeholder="Write your group id">
        <a href="https://green-api.com/en/docs/api/groups/SetGroupAdmin/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="setGroupAdmin" type="button" class="button buttonGreen">Set Group Admin</button>
    </div>
    <div class="date-container"><p id="result-text-setGroupAdmin"></p></div>
</form>

<!-- Add Group Participant method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/AddGroupParticipant/
-->
<form class="form-wrapper" id="AddGroupParticipant">
    <div class="date-container">
        <h2 class="section-title">Add group participant</h2>
        <input type="text" id="groupId-AddGroupParticipant" name="groupName" placeholder="Write your group id">
        <input type="text" id="participantChatId-AddGroupParticipant" name="participantChatId" placeholder="Write your participant id">
        <a href="https://green-api.com/en/docs/api/groups/AddGroupParticipant/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="addGroupParticipant" type="button" class="button buttonGreen">Add group participant</button>
    </div>
    <div class="date-container"><p id="result-text-AddGroupParticipant"></p></div>
</form>
<!-- Leave group method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/leaveGroup/
-->
<form class="form-wrapper" id="leaveGroup">
    <div class="date-container">
        <h2 class="section-title"> Leave group</h2>
        <input type="text" id="groupId-leaveGroup" name="groupName" placeholder="Write your group id">
        <a href="https://green-api.com/en/docs/api/groups/leaveGroup/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="addLeaveGroup" type="button" class="button buttonGreen"> Leave group</button>
    </div>
    <div class="date-container"><p id="result-text-leaveGroup"></p></div>
</form>
<!--log section 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/journals/GetChatHistory/  --About chat history
    https://green-api.com/en/docs/api/journals/GetMessage/ --About message in chat
--> 
<form class="form-wrapper" id="log" style="flex-wrap: wrap;">
    <div class="date-container">
        <h2 class="section-title">Information output</h2>
        <input type="text" id="chatId-chatHistory" placeholder="77059998882@c.ca">
    </div>
    <div class="date-container">
        <button id="GetChatHistory" type="button" class="button buttonGreen">GetChatHistory</button>
    </div>
    <div class="date-container-down">
        <div id="result-log"></div>
    </div>
</form>
<form class="form-wrapper" id="getMessage" style="flex-wrap: wrap;">
    <div class="date-container">
        <h2 class="section-title">Information output</h2>
        <input type="text" id="chatId-getMessage" placeholder="77059998882@c.ca">
        <input type="text" id="messageId-getMessage" placeholder="BAC23ZXC3R2">
    </div>
    <div class="date-container">
        <button id="GetMessage" type="button" class="button buttonGreen">Get message</button>
    </div>
    <div class="date-container-down">
        <div id="result-getMessage"></div>
    </div>
</form>
<!--queue section 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/journals/ShowMessagesQueue/  --About Show Messages Queue
    https://green-api.com/en/docs/api/account/GetSettings/ --About Clear Messages Queue
--> 
<form class="form-wrapper" id="queue" style="flex-wrap: wrap;">
    <div class="date-container">
        <h2 class="section-title">Information output</h2>
    </div>
    <div class="date-container">
        <button id="ShowMessageQueue" type="button" class="button buttonGreen">Show Messages Queue</button>
        <button id="ClearMessageQueue" type="button" class="button buttonGreen">Show Messages Queue</button>
    </div>
    <div class="date-container-down">
        <div id="result-queue"></div>
    </div>
</form>

<!-- Check WhatsApp method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/checkWhatsapp/
-->
<form class="form-wrapper" id="CheckWhatsapp">
    <div class="date-container">
        <h2 class="section-title"> Check WhatsApp</h2>
        <input type="text" id="chatNumber-checkWhatsapp" name="chatNumber" placeholder="Write your chat id">
        <a href="https://green-api.com/en/docs/api/groups/checkWhatsapp/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="checkWhatsapp" type="button" class="button buttonGreen"> Check WhatsApp</button>
    </div>
    <div class="date-container"><p id="result-text-checkWhatsapp"></p></div>
</form>
<!-- Get avatar method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/GetAvatar/
-->
<form class="form-wrapper" id="GetAvatar">
    <div class="date-container">
        <h2 class="section-title"> Get avatar</h2>
        <input type="text" id="chatNumber-GetAvatar" name="chatNumber" placeholder="Write your chat id">
        <a href="https://green-api.com/en/docs/api/groups/GetAvatar/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="getAvatar" type="button" class="button buttonGreen"> Get avatar</button>
    </div>
    <div class="date-container"><p id="result-text-GetAvatar"></p></div>
</form>
<!-- Get Contacts method
    You can read more about this metods here    
    https://green-api.com/en/docs/api/groups/GetContacts/
-->
<form class="form-wrapper" id="GetContacts">
    <div class="date-container">
        <h2 class="section-title"> Get Contacts</h2>
        <a href="https://green-api.com/en/docs/api/groups/GetContacts/"> You can read more about this metods here</a>
    </div>
    <div class="date-container">
        <button id="getContacts" type="button" class="button buttonGreen"> Get Contacts</button>
    </div>
    <div class="date-container" id="result-text-GetContacts"></div>
</form>
<!-- Instance and account section 
    You can read more about this metods here    
    https://green-api.com/en/docs/api/account/QR/  --About QR code
    https://green-api.com/en/docs/api/account/GetSettings/ --About acount settings
    https://green-api.com/en/docs/api/account/GetStateInstance/  --About acount state
-->        
        <form class="form-wrapper" id="info">
            <div class="date-container">
                <h2 class="section-title">Information output</h2>

                <p id="result-text"></p>
                <div id="reult"></div>
        
                <p>To get API Token and ID Instance please visit <a href="https://green-api.com/#section-connect">green-api.com</a></p>
                <p>Press Send Message button to dispatch hello world to phone</p>
                <p style="color:blue" id="resultText"></p>
            </div>
            <div class="date-container">
                <button id="ReceiveWhatsAppBtn" type="button" class="button buttonGreen">Receive message</button>
                <button id="recive-qr" type="button" class="button buttonGreen">Recive QR</button>
                <button id="getSettings" type="button" class="button buttonGreen">Get settings</button>
                <button id="getStateInstance" type="button" class="button buttonGreen">Get State Instance</button>
            </div>
            <div class="date-container">
                <button id="reboot" type="button" class="button buttonGreen">Reboot instance</button>
                <button id="getWaSettings" type="button" class="button buttonGreen">Get WhatsApp settings</button>

            </div>
        </form>
    </div>

<script>

// Here is the code for processing data and subsequent sending
        const link = 'https://api.green-api.com/waInstance'; //string
        const chatIds = []; //array

// Send message method
        document.getElementById("SendWhatsAppBtn").addEventListener("click", function () {
        /** 
         * @param {String} apiTokenInstance
         * @param {String} idInstance
         * @param {String} chatId
         * @param {String} message
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value;
            const chatId = `${document.getElementById("phoneNumber").value}`;
            const message = document.getElementById("messageText").value;
            const resultText = document.querySelector("#result-text-sendMessage");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.message.sendMessage(chatId, null, message)
            .then((data) => {
                    console.log(`Message send with ID ${data.idMessage}`);
                    resultText.textContent = ''
                    resultText.textContent = `Message send with ID ${data.idMessage}`;
                })
                .catch((error) => {
                    console.error("There was a problem sending message:", error);
                    resultText.textContent = ''
                    resultText.textContent = `There was a problem sending message: ${error}`;
                });
        });
// Send receive notification method
        document.getElementById("ReceiveWhatsAppBtn").addEventListener("click", function () {
        /** 
         * @param {String} apiTokenInstance
         * @param {String} idInstance
         */
            try {
                const restAPI = whatsAppClient.restAPI(({
                    idInstance: document.getElementById("idInstance").value,
                    apiTokenInstance: document.getElementById("apiTokenIsntance").value
                }))

                restAPI.webhookService.receiveNotification()
                .then((data) => {
                    console.log(data);
                    if (data.receiptId) {
                        restAPI.webhookService.deleteNotification(data.receiptId)
                        .then(() => {
                            document.getElementById("resultText").innerHTML = "Message was received successfully. Message text: " + JSON.stringify(data.body);
                        }).catch(reason => {
                            console.error(reason);
                            document.getElementById("resultText").innerHTML = "Message was not confirmed. Reason: " + reason + ". See logs for details";
                        })
                    }
                }).catch((reason) =>{
                    console.error(reason);
                    document.getElementById("resultText").innerHTML = "Message was not received. Reason: " + reason + ". See logs for details";
                });
            } catch (reason) {
                console.error(reason);
                document.getElementById("resultText").innerHTML = "Message was not received. Reason: " + reason + " See logs for details";
            }
        });
// Send file by upload method
        document.getElementById("SendFileWhatsAppBtn").addEventListener("click", function () {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatId
         * @param {String} fileInput
         * @param {String} caption
         */
                const idInstance = document.getElementById("idInstance").value
                const apiTokenInstance = document.getElementById("apiTokenIsntance").value
                const form = document.querySelector("#upload-form");
                const resultText = document.querySelector("#result-text-uploadFile");
                const fileInput = form.querySelector('input[type="file"]');
                const chatId = `${document.getElementById("phoneNumber-upload").value}@c.us`;
                const caption = document.getElementById("messageText-upload").value;


                const formData = new FormData();
                formData.append("chatId", chatId);
                formData.append("caption", caption);
                formData.append("file", fileInput.files[0]);
                const restAPI = whatsAppClient.restAPI({
                    idInstance: idInstance,
                    apiTokenInstance: apiTokenInstance
                })
                restAPI.file.sendFileByUpload(formData).then((response) => {
                    if (!response.ok) {
                        throw new Error("Network response was not ok");
                    }
                    return response.json();
                    })
                    .then((data) => {
                    console.log(`File uploaded with ID ${data.idMessage}`);
                    resultText.textContent = ''
                    resultText.textContent = `File uploaded with ID ${data.idMessage}`;
                    })
                    .catch((error) => {
                    console.error("There was a problem uploading the file:", error);
                    resultText.textContent = ''

                    resultText.textContent = `There was a problem uploading the file: ${error}`;
                    resultText.style.color = 'red'
                  });
        });
// Send file by URL method
        document.getElementById("SendFileByUrlWhatsAppBtn").addEventListener("click", () => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatId
         * @param {String} Url
         * @param {String} caption
         * @param {String} fileName
         */

            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatId = `${document.getElementById("phoneNumber-uploadByUrl").value}@c.us`;
            const caption = document.getElementById("messageText-uploadByUrl").value;
            const url = document.getElementById('fileByUrl').value;
            const fileName = document.getElementById('fileName').value;
            const resultText = document.querySelector("#result-text-sendFileByUrl");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.file.sendFileByUrl(chatId, null, url, fileName, caption).then((data) => {
                console.log(`File upload ${data.idMessage}`);
                resultText.textContent = ''
                resultText.textContent = `File upload ${data.idMessage}`;
            }).catch((error) => {
                console.error("There was a problem sending message:", error);
                resultText.textContent = ''
                resultText.textContent = `There was a problem sending message: ${error}`;
            })
        })
//Does not work from the browser because FS is used
// Send file by upload method
        document.getElementById("SendFileByUploadWhatsAppBtn").addEventListener("click", () => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} caption
         * @param {String} fileName
         */

            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const filePath = document.getElementById('file-input-upload').value
            const resultText = document.querySelector("#result-text-sendFileByUpload");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.file.uploadFile(filePath).then((data) => {
                console.log(`File upload ${data}`);
                resultText.textContent = ''
                resultText.textContent = `File upload ${data}`;
            }).catch((error) => {
                console.error("There was a problem sending message:", error);
                resultText.textContent = ''
                resultText.textContent = `There was a problem sending message: ${error}`;
            })
        })
//Reboot
        document.getElementById("reboot").addEventListener("click", () => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */

            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.reboot().then((data) => {
                console.log(`Instance reboot ${data.isReboot}`);
                resultText.textContent = ''
                resultText.textContent = `Instance reboot ${data.isReboot}`;
            }).catch((error) => {
                console.error("There was a problem with rebooting:", error);
                resultText.textContent = ''
                resultText.textContent = `There was a problem with rebooting: ${error}`;
            })
        })
// Recive qr method
        document.getElementById('recive-qr').addEventListener('click', () => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.qr().then((data) => {
                console.log(` ${data.message}`);
                resultText.textContent = ''
                resultText.textContent = ` ${data.message}`;
            }).catch((error) => {
                console.error("Problem getting qr:", error);
                resultText.textContent = ''
                resultText.textContent = `Problem getting qr: ${error}`;
            })

        })
// This function for saving your phone numbers when you creating a group
        document.getElementById('chatPlus').addEventListener('click',function () {
            const num = `${(document.getElementById('chatIds').value)}@c.us` ;
            return chatIds.push(num);
        })
// Create group method
        document.getElementById('createGroup').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatName
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatName = document.getElementById('groupName').value
            const restAPI = whatsAppClient.restAPI({   
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.group.createGroup(chatName, chatIds, null).then((response) => {
                if (!response.ok) {
                    throw new Error ('Network is not ok')
                }
                return response.json()
            }).then((data) => {
                console.log(`Group created with ID ${data.idMessage}`);
                resultText.textContent = ''
                resultText.textContent = `Group created with ID ${data.idMessage}`;
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                resultText.textContent = ''
                resultText.textContent = `Group not created ${error}`;
            })
        })
// Update group name method
        document.getElementById('updateGroupName').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatName
         * @param {String} groupId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatName = document.getElementById('groupName-upadteName').value
            const groupId = document.getElementById('groupId-updateName').value
            const result = document.getElementById('result-text-UpdateGroupName')

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            }); 

            restAPI.group.updateGroupName(groupId, chatName).then((data) => {
                console.log(`Group update ${data}`);
                result.textContent = ''
                for(const item in data) {
                    result.textContent += `Group update ${item} `;
                }
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                result.textContent = ''
                result.textContent = `Group not created ${error}`;
            })
        })
// Get group data method
        document.getElementById('getGroupData').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} groupId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const groupId = document.getElementById('groupId-GetGroupData').value
            const result = document.getElementById('result-text-GetGroupData')

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            }); 

            restAPI.group.getGroupData(groupId).then((data) => {
                console.log(`${data}`);
                result.textContent = ''
                const newData = JSON.stringify(data);
                result.textContent = `${newData}`
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                result.textContent = ''
                result.textContent = `Group not created ${error}`;
            })
        })
// Add Group Participant method
        document.getElementById('addGroupParticipant').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} groupId
         * @param {String} participantChatId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const groupId = document.getElementById('groupId-AddGroupParticipant').value
            const participantChatId = document.getElementById('participantChatId-AddGroupParticipant').value
            const result = document.getElementById('result-text-AddGroupParticipant')

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            }); 

            restAPI.group.addGroupParticipant(groupId, participantChatId, null).then((data) => {
                console.log(`${data}`);
                const newData = JSON.stringify(data)
                result.textContent = ''
                result.textContent = `${newData}`
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                result.textContent = ''
                result.textContent = `Group not created ${error}`;
            })
        })
//Set group admin
         document.getElementById('setGroupAdmin').addEventListener('click',() => {
         /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} groupId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatId = document.getElementById('chatId-setAdmin')
            const groupId = document.getElementById('groupId-setAdmin').value
            const result = document.getElementById('result-text-setGroupAdmin')

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            }); 

            restAPI.group.setGroupAdmin(groupId, chatId, null).then((data) => {
                console.log(`${data}`);
                result.textContent = ''
                const newData = JSON.stringify(data);
                result.textContent = `${newData}`
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                result.textContent = ''
                result.textContent = `Group not created ${error}`;
            })
        })
//Leave group
        document.getElementById('addLeaveGroup').addEventListener('click',() => {
         /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} groupId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const groupId = document.getElementById('groupId-leaveGroup').value
            const result = document.getElementById('result-text-leaveGroup')

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            }); 

            restAPI.group.leaveGroup(groupId).then((data) => {
                console.log(`${data}`);
                result.textContent = ''
                const newData = JSON.stringify(data);
                result.textContent = `${newData}`
            }).catch((error) => {
                console.error(`Group not created ${error}`)
                result.textContent = ''
                result.textContent = `Group not created ${error}`;
            })
        })       
// Get settings method
        document.getElementById('getSettings').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const reult = document.getElementById("reult");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.settings.getSettings().then((data) => {
                console.log(`Your settings ${data}`);
                console.log(data)
                resultText.textContent = ''
                resultText.textContent += `Your settings:`;
                for (items in data) {
                    const sett = document.createElement('p');
                    sett.textContent = `${items}:${data[items]}`;
                    reult.appendChild(sett)
                }

            }).catch((error) => {
                console.error(`Problems with your settings ${error}`)
                resultText.textContent = ''
                resultText.textContent = `Problems with your settings ${error}`;
            })
        })
// Check WhatsApp method
        document.getElementById('checkWhatsapp').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const number = Number(document.getElementById("chatNumber-checkWhatsapp").value)
            const result = document.getElementById("result-text-checkWhatsapp");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.checkWhatsapp(number).then((data) => {
                console.log(`existsWhatsapp ${data.existsWhatsapp}`);
                result.textContent = ''
                result.textContent += `existsWhatsapp: ${data.existsWhatsapp}`;
            }).catch((error) => {
                console.error(`Problems with your method ${error}`)
                result.textContent = ''
                result.textContent = `Problems with your method ${error}`;
            })
        })
// Get avatar method
        document.getElementById('getAvatar').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const number = document.getElementById("chatNumber-GetAvatar").value
            const result = document.getElementById("result-text-GetAvatar");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.getAvatar(number, null).then((data) => {
                console.log(`Avatar ${data.urlAvatar}`);
                result.textContent = ''
                for (const item in data) {
                    result.textContent += `Avatar: ${data.urlAvatar}`;
                }

            }).catch((error) => {
                console.error(`Problems with your method ${error}`)
                result.textContent = ''
                result.textContent = `Problems with your method ${error}`;
            })
        })


// Get avatar method
        document.getElementById('getContacts').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const result = document.getElementById("result-text-GetContacts");

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.getContacts().then((data) => {
                console.log(`Contact ${data}`);
                result.textContent = ''
                for (const key in data) {
                    const container = document.createElement('div')
                    const contact = data[key];
                    container.textContent += `Contact Name: ${contact.id}, Contact Email: ${contact.name},Contact type: ${contact.type}\n`;
                    result.appendChild(container)
                }

            }).catch((error) => {
                console.error(`Problems with your method ${error}`)
                result.textContent = ''
                result.textContent = `Problems with your method ${error}`;
            })
        })


// Get state instance method
        document.getElementById('getStateInstance').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.getStateInstance().then((data) => {
                console.log(`Yours status ${data.stateInstance}`);
                resultText.textContent = ''
                resultText.textContent = `Yours status ${data.stateInstance}`;
            }).catch((error) => {
                console.log(`Problems whith getting ${error}`);
                resultText.textContent = ''
                resultText.textContent = `Problems whith getting ${error}`;
            }).catch((error) => {
            })
        })
// Get WhatsApp status method
        document.getElementById('getWaSettings').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.instance.getWaSettings().then((data) => {
                console.log(`Yours status ${data}`);
                resultText.textContent = ''
                resultText.textContent = `Yours status ${data}`;
            }).catch((error) => {
                console.log(`Problems whith getting ${error}`);
                resultText.textContent = ''
                resultText.textContent = `Problems whith getting ${error}`;
            }).catch((error) => {
            })
        })
// Get chat history method
        document.getElementById('GetChatHistory').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatId = document.getElementById("chatId-chatHistory").value
            const logs = document.getElementById("result-log")

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.message.getChatHistory(chatId).then((data) => {
                logs.textContent = ''
                console.log(data)
                for (const dataItem of data) {
                    const chat = document.createElement('div')
                    console.log(`Yours chats ${JSON.stringify(dataItem)}`);
                    chat.textContent += `Yours chats ${JSON.stringify(dataItem)}`;
                    logs.appendChild(chat);
                }
            }).catch((error) => {
                console.log(`Problems whith getting ${error}`);
                logs.textContent = ''
                logs.textContent = `Problems whith getting ${error}`;
            }).catch((error) => {
            })
        })
//Get message method
        document.getElementById('GetMessage').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         * @param {String} chatId
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const chatId = document.getElementById("chatId-getMessage").value
            const logs = document.getElementById("result-getMessage")
            const messageId = document.getElementById("messageId-getMessage").value

            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.message.getMessage(chatId, messageId).then((data) => {
                logs.textContent = ''
                console.log(data)
                for (const dataItem in data) {
                    logs.textContent += `${dataItem}: `
                    logs.textContent += `${data[dataItem]} \n`;
                }
            }).catch((error) => {
                console.log(`Problems whith getting ${error}`);
                logs.textContent = ''
                logs.textContent = `Problems whith getting ${error}`;
            }).catch((error) => {
            })
        })
//Show Message Queue method
        document.getElementById('ShowMessageQueue').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const logs = document.getElementById('result-queue')
            
            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.message.showMessagesQueue().then((data) => {
                console.log(`Queue ${JSON.stringify(data)}`);
                logs.textContent = ''
                logs.textContent = `Yours queue ${JSON.stringify(data)}`;
            }).catch((error) => {
                console.log(`Problems whith queue ${error}`);
                logs.textContent = ''
                logs.textContent = `Problems whith queue ${error}`;
            }).catch((error) => {
            })
        })
//Delete Message Queue method
        document.getElementById('ClearMessageQueue').addEventListener('click',() => {
        /** 
         * @param {String} idInstance
         * @param {String} apiTokenInstance
         */
            const apiTokenInstance = document.getElementById("apiTokenIsntance").value;
            const idInstance = document.getElementById("idInstance").value
            const logs = document.getElementById('result-queue')
            
            const restAPI = whatsAppClient.restAPI({
                idInstance: idInstance,
                apiTokenInstance: apiTokenInstance
            });

            restAPI.message.clearMessagesQueue().then((data) => {
                console.log(`Queue ${JSON.stringify(data)}`);
                logs.textContent = ''
                logs.textContent = `Queue ${JSON.stringify(data)}`;
            }).catch((error) => {
                console.log(`Problems whith queue ${error}`);
                logs.textContent = ''
                logs.textContent = `Problems whith queue ${error}`;
            }).catch((error) => {
            })
        })    
    
    </script>
</body>

</html>