How to use Modal without a backdrop (nobackdrop: true)?

[hammadzz (Hammad)]

I have successfully managed to setup a freskdesk custom app for the side panel. The side panel has a width limitation of 250px and a length limitation of 700px. Beyond 700px it has scroll bars. This makes a sidepanel app very limited to the 250px width of UI components.

Now using modals is a great option, it gives you plenty of space over the sidepanel, but the backdrop makes it impossible to copy paste information from the ticket. In my case that is a key requirement.

The docs indicate:
“The modal without backdrop is a beta feature and not available for all Freshdesk accounts.”

How can I have this added to my account as it is not working for me:

    client.interface.trigger("showModal", {
      title: "Modal Title",
      template: "index.html",
      nobackdrop: true
    });

I see an earlier topic was unanswered and marked closed:

Issue with Modal Without Backdrop Feature

Hi Team, Greetings! I recently tried adding a linked text within a modal window, but as per the documentation, this is only supported for modals without a backdrop, not with one. However, even when using the modal without a backdrop, it didn’t work. Upon checking the documentation here, I found that the modal without a backdrop is a beta feature and isn’t available for all Freshdesk accounts. Could you please clarify which accounts have access to this feature? Are there any alternative ways …

[Bene_Immanuel (Benny Immanuel)]

Hi @hammadzz,

Welcome to the community

Yeah, but we went with a workaround, our case is to push the content and link from the modal to the reply window, so we used the below code to send the data (content and links) using the below method

client.instance.send // in the modal
client.instance.receive // in app.js to receive, as some interface methods can't be used inside the modal
client.interface.trigger("setValue", {
  id: "editor",
  text: `<a target='_blank' href='${data}'>Payment Link</a>`,
  replace: false, 
  position: "end"
}) // this code inside the receive method

If you’re developing a React application, you can use the react-copy-to-clipboard npm package, which allows you to bypass the product’s restriction and enable clipboard functionality.

Hope this helps, let me know otherwise.

Thank you.

[hammadzz (Hammad)]

Really appreciate your reply!

I should have clarified better. For this app we want to copy content from the ticket replies into the modal.

It seems to me having the backdrop is what disables you from selecting text from the ticket replies or scrolling through the ticket.

[hammadzz (Hammad)]

Would anyone from the freskdesk team chime in here?

The freshdesk sidepanel app is quite limited in space as a UI, it would be great if the modal without backdrop could be an option.

If I cannot find an easy solution to this I really don’t want to invest further time into Freshdesk and would prefer to just put in the effort to migrate out of this platform.

[ThomasH]

Hey @hammadzz

I am not from Freshworks, but did you try to reach out to the support team (support@freshdesk.com)?
If it is something to be activated like beta-stuff or other things, I usually reach out to them.

The non-modal-backdrop feature is kind of a different story, as being heavily related to app dev, but they are usually fast in replying.

Another option is to ask @Freddy who is able to enroll one in the Non-Modal-Backdrop beta.

Best
Tom

[hammadzz (Hammad)]

@ThomasH

support@freshdesk.com

Thanks, I reached out to support, hoping this sorts us out.