Crayons v4 not working with iparams.html

Hey Team,

I’ve been working with the crayons v4. But after the outage on the 4th of April, the JQuery part doesn’t seem to work. For example, click events are not getting triggered. I’m currently in using the platform version 2.3
Now I had to shift to the default version. Which seems to be working as of now. Could you please help with what might be the reason for this?

Iparams HTML code

<html>
  <head>
    <title>Freshdesk custom app</title>
    <link rel="stylesheet" type="text/css" href="https://static.freshdev.io/fdk/2.0/assets/freshdesk.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/css/crayons-min.css" />
    <link rel="stylesheet" type="text/css" href="./assets/iparams.css" />
  </head>
  <body>
    <div class="tabs">
      <fw-tabs>
        <fw-tab class="tab" tab-header="Freshdesk Configuration">
          <fw-input id="domain_name" label="Domain Name" class="fw-mt-12" placeholder="Enter Freshdesk Domain name" required clear-input></fw-input>
          <fw-input id="api_key" label="Api Key" class="fw-mt-12" placeholder="Enter Freshdesk Api key" data-bind="product.api_key" required clear-input></fw-input>
          <fw-button id="freshdeskConnect" color="primary" class="fw-mt-16">Verify</fw-button>
        </fw-tab>
      </fw-tabs>
    </div>
    <script async src="{{{appclient}}}"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script type="module" src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.esm.js"></script>
    <script src="https://unpkg.com/@freshworks/crayons/dist/crayons/crayons.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        app.initialized().then(function (_client) {
          window.client = _client;
          $("#freshdeskConnect").on("fwClick", connectFreshdesk); // This event doesn't seem to get triggered
        });
      });
    </script>
  </body>
</html>

Kindly let me know if I’m missing anything here. Thanks in advance.

Hi @mohammed fo the Crayons v4 javascript files you need to use the below CDN’s

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"
></script>
<script
  nomodule
  src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"
></script>

Also make sure you follow the Migration guide docs for v4
https://crayons.freshworks.com/introduction/migrating-to-v4

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.