Action Button as Custom Button to open the Form widget

Ask the Community General Questions
1

Hi,

I’d like to use an action button to directly open the form widget (floating window).

Is there a way to do this?

Similar to the custom button solution.

3 Likes
3

Hi there, @Sina :waving_hand:

You’re using a floating pane layout for your form and you’d like it to show up on the same page where the AI Chatbot is installed, am I right?

1 Like
4

Yes @Max

2 Likes
5

Could you please send me a link to the page, where your AI Chatbot and Form widgets are installed? I’ll be happy to look into this :wink:

2 Likes
6

ok. i’ll send you details in a pm

2 Likes
7

Thank you!

Please try to add this script to the Custom JS field of your AI Chatbot widget:

const actionButtonSelector = ".es-message-assistant [class*='action-buttons__Container-sc'] button";
const buttonTextSelector = ".es-content-button-text";
const targetButtonText = ("Termin stornieren").trim().toLowerCase();

document.addEventListener("click", (e) => {
  const actionButton = e.target.closest(actionButtonSelector);

  if (!actionButton) {
    return;
  }

  const actionButtonTextNode = actionButton.querySelector(buttonTextSelector);

  if (!actionButtonTextNode) {
    return;
  }

  if (actionButtonTextNode.textContent.trim().toLowerCase() === targetButtonText) {
    e.preventDefault();
    e.stopPropagation();

    document.dispatchEvent(new Event("es-ai-chatbot-open-form-request"));
  }
}, true);

And this script should be used in the Custom JS section of your Form widget:

document.addEventListener("es-ai-chatbot-open-form-request", () => {
  document.querySelector('[data-elfsight-show-form="0ec5771e-021d-419c-b50e-1206919bfcdd"]')?.click();
});

Please test it out and let me know how it works :wink:

1 Like
8

Hi @Max

It works. :clap:

However, the form is behind the chat window. Either it should be the other way around, or the chat window should be minimized/hidden at the same time.

2 Likes
9

I see, thanks!

Our devs will adjust the script and I’ll update you once it’s done :slightly_smiling_face:

1 Like
10

Hi @Sina :waving_hand:

Thank you for waiting!

We’ve added this CSS code to your Form Builder to display the chat behind the form:

@external {
  .es-portal-root.eapps-form-builder-0ec5771e-021d-419c-b50e-1206919bfcdd-custom-css-root {
    z-index: 999999999999;
  }
}

Check it out and let me know if you like the result :wink:

2 Likes
11

Wow. thats works fine now :clap: :folded_hands: :blush:

Thank you @Max

2 Likes
12

Glad to hear that!

You’re very welcome, @Sina :wink:

1 Like
13

@Max

I’ve actually overlooked something. The button only works on this page where the form is embedded. Basically, I now need to include the install code globally across all pages. Right? I don’t have time to do that right now. But one question beforehand: Will the JavaScript still be usable as it is now?

2 Likes
14

Yep, the script will work on all pages, where the widgets will be installed :slightly_smiling_face:

2 Likes
15

Hi @Max

I’ve added the widget to my /index.php file. The AI ​​chatbot is accessible from every page.

It doesn’t work from here.

The queryselector is here not present.

2 Likes
16

The thing is that the AI Chatbot script depends on the text of the custom button that triggered the form on your Contact page:

image
image630×394 23.9 KB


I’ve checked your index.php page and don’t see this button there. If you add the same button, everything will work fine. Or do you want to trigger the form without a custom button (Termin stornieren) on the index.php page?

1 Like
17

Basically, I’ve only opened this button on one page, using the form.

Now there’s also the button in the chat window, which makes the intermediate step on the contact page unnecessary. Right?

In principle, the button in the chat window should be treated like the custom button on the contact page.

If this can’t be done better with JavaScript and only this trigger is needed, then I’d have to try adding a hidden button to the index.php file.

<button
  type="button"
  id="elfsightCancelTrigger"
  data-elfsight-show-form="0ec5771e-021d-419c-b50e-12xxxxxxxxx"
  hidden
  aria-hidden="true"
  tabindex="-1">
  Termin stornieren
</button>
<style>
#elfsightcanceltrigger{ display:none !important; }
</style>

That works. I just tried it quickly. Is that a good solution?:thinking:

1 Like
18

Yeah, I see what you mean. However, there’s still a chance that someone won’t use the chatbot and would like to open the form directly.

Just to clarify,

  • The custom button will be used only on the Contact page.

  • On other pages (including index.php) the only way to trigger the form is clicking an Action button in the chatbot. This is why you need a script, that’s not based on the custom button text.

Is everything correct?

19

Yes @Max you’re absolutely right.

  1. Those who don’t use the chat will find the form on the page.
  2. However, those who see the button in the chat want/should see the form.
1 Like
20

Got it, thanks!

I’ve forwarded your request to the dev team and will update you once I have their response :slightly_smiling_face:

21

Yes, it would be really nice to be able to open a form in a pop-up from a button.

1 Like