Two buttons on an embedded popup

Bugs / Site Issues
1

Has anyone had the issue where two buttons show up for an embedded popup? I added the embeds on Friday, and everything was working fine.

Then on Sunday, I see two buttons for each popup. I tried deleting the code module, and adding a new one with freshly copied code. I also tried changing the bot, which also didn’t work.

Any Ideas???

Two Button Popup Embed
Two Button Popup Embed715×528 33.7 KB

2

Can you post your code?

3

Thanks for your response!

Do you think it’s Pickaxe code related if it was working one day, and not the next? I haven’t done anything to the code, but also not sure if I can just post it in the text body here.

The double button is only half of the problem, the other half is that it couldn’t be centered in the module for some reason - it would only stay aligned left.

Also, I’m using Divi 5 builder Alpha, so that could also have something to do with it. I’m now experimenting with using a page type pop-up instead of the Pickaxe pop-up to alleviate the problems, and that will also be more consistent with button attributes across the whole site.

Still, any advice would be appreciated since this shouldn’t really be an issue.

4

Hi @paulfio

Thanks for the update.

Yes, the Divi 5 maybe the issue.

Have you tried without the Divi 5 code to see what happens?

5

No, but I do have a couple of other Divi 4 sites I can try it on, I just need to find the time.

I’ll try it this evening, and let you know.

Thanks!

1 Like
6

Hi @paulfio,

If you share the website link, we can debug further.

7

I removed the code from the site and changed to using a site based pop-up.

Let me add the code again and send you the link.

8

Here’s the site link: Chatbots | Business Resource Group

Just an FYI - I’m still working on the site, and now the button is showing correctly but still won’t let me center it

9

Try adding this config script

 <script>
    window.PickaxeConfig = {
      "deployment-96ce9778-a226-4dee-a8dd-d8e83fa3af1e": {
        "style": {
          "display": "inline-block",
        }
      }
    };
  </script>
10

Im having the same issue with several embeds of different agents and style ive dug and dug it has to be coming from pickaxe

11

Hi @r3dux,

If you share the website link, we can debug further.

12

seasideselect.com Iam actively dealing with other issues on it

13

Ahh looks like there are two links to bundle.js but, I’ll make an update that will check for this. You can remove one of them for now.

14

Just wanted to get back to you and @stephenasuncion about this issue.

It seems that the button problem somehow worked itself out and now only displays one button, but I found another issue that will probably be internal to Pickaxe.

When I tested the popup on mobile, it would not adjust to show the submit button, though thankfully the “x” to close it was displayed. Below is a screenshot of what I saw, and with multiple attempts at resizing the width in Pickaxe, it would not get any narrower to display the submit button.

However, the pop-up method I was using would show everything, albeit a bit too narrow and had to scroll to see input and submit (other screenshot). That pop-up was done with code, not a plugin, so I think the best bet would be to just use a plugin with better control over padding / margin.

I do like the appearance of the Pickaxe pop-up better though, I wish it worked better.

Pickaxe Popup
Pickaxe Popup806×1795 118 KB

Pickaxe Popup
Pickaxe Popup806×1795 91.5 KB

15

@stephenasuncion -

can you elaborate on what you can do with window.PickaxeConfig? I know you can pass params in, but is this adjusting styles of the button? chat window? Can we do both? Does it just mixin our styles, or…? Any behavioral flags to know about? Thanks!

(types of things I’d love to be able to do… remove button border (popup embed), spacing/centering, custom fonts/font weights, chat close behavior (I’d rather just hide it, not close it, as a way of retaining session history)), etc?

16

Hi @paulfio,

Checkout the popup embed again. I made some changes to fix mobile responsiveness.

17

Hi @jrosenthal,

window.PickaxeConfig was initially intended for actions. All data within it is transferred as an environment variable (PICKAXE_FRONTEND_PICKAXE_CONFIG) in the form of a raw JSON string, which you can parse and use in your action code.

Currently, the only thing the embed scripts modify is the container of the embed.
For example:

window.PickaxeConfig = {
  "deployment-e9ec462e-ff4f-47d8-afc4-9785340e5962": {
    "class": "custom-class-1 custom-class-2",
    "style": {
      "display": "inline-block",
    }
  }
};

image
image1032×103 10.3 KB

Or, if you want to apply the style to all embed deployments:

window.PickaxeConfig = {
  "class": "custom-class-1 custom-class-2",
  "style": {
    "display": "inline-block",
  }
};

image

…
And all these only work on script embeds.

18

Hi @stephenasuncion ,

That looks and works beautifully - thank you!!!

1 Like