Clickable widgets

[Stijnvhd]

Thank you for creating a great chatbot kit! Only issue I seem to have is when I add custom widgets, these aren't always clickable or only clickable in certain locations in the chatbot environment. Is there a specific reason for that?

[FredrikOseberg]

Hi!

I'm not sure what you are referring too. What in your widget is not clickable? Since widgets are just regular react components, they should follow the same rules when transformed into HTML. Can you please provide me with an example of your issue?

[Stijnvhd]

So if I render as a response a widget consisting out of 2 buttons, the buttons are only clickable in a certain area (generally the top left corner of the button) and if I arrange them in a certain way (they have to appear on top of each other but not next to each other). I also rendered a questionnaire in the chatbot and the first 3 rows aren't clickable, after those three I can do everything without any problem.

[Stijnvhd]

This is one example of a widget I call:

const example = (props) => {

return (
    <div className="container">
        <button
            className="A"
            onClick={props.actionProvider.handleA}
        >
            A 
        </button>
        <br />
        <button
            className="B"
            onClick={props.actionProvider.handleB}
        >
            B
        </button>
        <br />
        <button
            className="C"
            onClick={props.actionProvider.handleC}
        >
            C
        </button>
    </div>
);

[FredrikOseberg]

Do you have your code on github?

ons. 3. feb. 2021 kl. 18:40 skrev Stijnvhd notifications@github.com:

This is one example of a widget I call:

const example = (props) => {

return (

A
B
C

);

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/21#issuecomment-772691987, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPSTRLOOXYQFQEYO3RDS5GDBZANCNFSM4XAQTYQA .

[Stijnvhd]

I shared an invite with you to the repository, thanks a lot for taking the time!

[FredrikOseberg]

No problem. I didn't receive it yet. Did you send the invite to the correct user/address?

On Wed, Feb 3, 2021 at 8:30 PM Stijnvhd notifications@github.com wrote:

I shared an invite with you to the repository, thanks a lot for taking the time!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/21#issuecomment-772762510, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPXMWLEBMFDUUPTY74TS5GP4LANCNFSM4XAQTYQA .

[FredrikOseberg]

I shared an invite with you to the repository, thanks a lot for taking the time!

Alright. I've taken a look and the good news is that the issue is not related to this package. It seems your chat header is a paragraph that spans the entire height of the chatbot and is "overlaying" over a big part of your viewport:

Your buttons are placed underneath this element which means that when you are trying to click them, you are actually clicking on the paragraph element. May I suggest you implement a custom header component if you need to change the chatbot header?

In the config:

  customComponents: {
     // Replaces the default header
    header: () => <div style={{ backgroundColor: 'red', padding: "5px", borderRadius: "3px" }}>This is the header</div>
  },

Let me know if that helps you out :)

[Stijnvhd]

Hi, thanks for having a look! I adapted the code but I am afraid the problem persists.

[FredrikOseberg]

If you remove your paragraph with the class of "chat_titel", the problem persists? I could press the buttons just fine on my end.

On Thu, Feb 4, 2021 at 8:12 AM Stijnvhd notifications@github.com wrote:

Hi, thanks for having a look! I adapted the code but I am afraid the problem persists.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/21#issuecomment-773087047, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPUFYONWYQP22U4MLG3S5JCEFANCNFSM4XAQTYQA .

[Stijnvhd]

Found the problem, was on a different page something similar. Thanks a lot for your time and feedback, and thanks a lot for the package in general!