Using Freschat with HTML5 dialog element

Product
1

Hi all, we are replacing and creating new views in our application using the HTML5 dialog element.

Previous to this element, these old views always have an icon to open the chat to the support department. These views also are totally maximized covering all the application.

Using the native dialog element, we are not able to show the chat because the API always creates the elements into the document.body . Even if we make a custom button to open the chat, we still have the same problem because the current API is not ready to see where to attach all the views related to the chat (always into the document.body)

Is there any workaround to solve this or maybe is there in the roadmap the future feature to set optionally where to attach the chat elements?

For example, if we create a web component it would be constructive that all the related views were created looking for the parent where the component is.

Regards.

1 Like
3

Broadly speaking, You would like to render Freshchat in a modal popup rather than traditional right corner?

4

Hi @Saif

I have the same issue as this. Would you be able to provide support in how to render Freshchat in an element of our choosing rather than it being appended to the document.body? I’ve had a look in the docs but so far have been unable to find anything.

Many thanks

Alix

5

Hi @felix and @AlixRichards ,

I’ve answered a similar query earlier that might be of use to you as well.

I’ve explained how you could create an iframe and load the Freshchat widget within that iframe in fullscreen mode. That way, you can control the height and width of the iframe and place it wherever you want on your web page.

Hope this helps.

Regards,
Arun Rajkumar

1 Like
6

Making freshchat widget full screen and paying with enclosing iframe is very clever, @arunrajkumar235

@AlixRichards - I guess in that case you will have to apply changes to the closing iframe to may be child it under the element of your choosing?

1 Like
7

Thanks both but I don’t think either of these answer my specific question.

What I’m hoping to do is something like :

 window.fcWidget.init({
    token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
    host: "https://wchat.freshchat.com",
    elementId: "elementToAppendFreshChatTo"

elementId: “elementToAppendFreshChat to” - is there a parameter like this I can pass or another way of achieving the same?

So that when freshchat is initialised it is appended to an element of my choosing rather than the document.body

Is that possible? Can you help with this?

8

Hey @AlixRichards ,

There is no such configuration like elementId. Which is why I’d shared the other alternative approach to load the widget inside an iframe. That way you have full control over the size and position of the iframe element.

Regards,
Arun Rajkumar

9

hi, I think that my reply did not arrive yesterday replying through the email, because of the videos attached (on that example you could see perfectly the problem regarding the modal attribute using a native HTML5 element).

I am very skeptical about the solution you published about the iframe. My initial thoughts were something similar to what Alix proposed: an id or something to decide where to attach the code related to the widget because on your code I saw how the document.body is a fixed parameter and there is no way to change or decide where to put it.

I don’t know also if you are understanding exactly what is the problem I am trying to explain. It is a pity that the videos did not arrive and did not publish.

<!doctype html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #custom_fc_button {
      width: 10%;
      position: absolute;
      right: 1px;
      bottom: 20px;
    }
    #imageicon {
      height: 30%;
      width: 30%
    }
    dialog {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      background-color: #fabada;
    }
  </style>

</head>
<body>
  <dialog>
    <h1>I am an HTML dialog as a modal, over the top of any other dialogs that might be present. Interaction outside the dialog is blocked.</h1>
    <button type="button" onClick="openWidget()">Open widget inside</button>
  </dialog>
  <script>
     window.fcSettings = {
    token: "PUT A TOKEN HERE",
    host: "https://wchat.freshchat.com",
    config: {
      headerProperty: {
        hideChatButton: true
      }
    },
    onInit: function() {
      window.fcWidget.on("widget:loaded",function() {
        document.getElementById('custom_fc_button').style.visibility = 'visible';
        window.fcWidget.on("unreadCount:notify", function(resp) {
          console.log(resp);
          test = resp;
        });
        window.fcWidget.on("widget:closed", function() {
          document.getElementById('fc_frame').style.visibility = 'hidden';
          document.getElementById('open_fc_widget').style.visibility = 'visible';
        });
        window.fcWidget.on("widget:opened", function(resp) {
          document.getElementById('open_fc_widget').style.visibility = 'hidden';
        });
      });
    }
  };


    var openWidget = function() {
      document.getElementById('fc_frame').style.visibility = 'visible';
      window.fcWidget.open();
    };

    window.onload = function() {
      // with modal
      document.querySelector('dialog').showModal();
      // no modal
      // document.querySelector('dialog').show();
    }

  </script>
  <script src="https://wchat.freshchat.com/js/widget.js" async></script>
</body>
</html>

If you change from .showModal() to .show() you will see both differences.

Regards