====== Freshchat ======

To use freshchat widget add this code to the custom script section:

<code>
// BEGINNING OF FRESHCHAT WIDGET //
  var freshchathost = "<FRESHCHAT_HOST>";
  var freshchattoken = "<FRESHCHAT_TOKEN>";
  function initFreshChat() {
    window.fcWidget.init({
      config: {
        "cssNames": {
          "widget": "custom_fc_frame"
        }
      },
      token: freshchattoken,
      host: freshchathost
    });
  }
  function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src=freshchathost+"/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}initiateCall();

  document.body.addEventListener("userLogIn", function(e){
    var user = e.detail;
    window.fcWidget.setExternalId(user.id);
    window.fcWidget.user.setFirstName(user.displayName);
    window.fcWidget.user.setEmail(user.email);
  });
// END OF FRESHCHAT WIDGET //
</code>

To make it work for your case, insert freshchat host and token in these lines only:
<code>
  var freshchathost = "<FRESHCHAT_HOST>";
  var freshchattoken = "<FRESHCHAT_TOKEN>";
</code>

To move the chat widget around, add this to FOOTER CONTENT:
<code>
<style>
.custom_fc_frame {
  margin: a b c d
}
.custom_fc_frame.fc-open { margin: 0 }
</style>
</code>
where
a - move down
b - move left
c - move up
d - move right
certain amount of pixels, e.g. `margin: 0 10px 10px 0` -> moves widget upwards and to the left in 10px both.