Services Plugins FAQs

Native Emoji Picker+ not displaying picker

Hello,

I am trying to use this Emoji Picker and I have followed the documentation however I am finding that no emoji pop up ever appears when I go to preview mode.

Plugin used: Native Emoji Picker + Plugin | Bubble Version 1.5. 0

I have attached a recording of my settings and set up. Is anyone able to help? This should be relatively straightforward but apparently I am missing something. Screenshots of elements, HTML IDs, and workflows below.




Thanks,

Hello @janiece.lincoln,

Thank you for reaching out to us.

I’m sorry to hear about the difficulties you’re experiencing with the plugin. I have tested and reviewed the details you provided, but I wasn’t able to identify any problems with the pop-up not appearing.

To further investigate, could you please provide more details? Specifically, could you share which device and browser you are using? Is this issue occurring on other devices as well? Also, could you try opening our demo page to see if it functions correctly for you?

Additionally, are you using any custom CSS in the plugin element, in the categories, or custom JSON [image]?

To determine if there are any errors preventing it from showing up, could you please create a video in step-by-step mode from the moment you open the page and click on the icon that should open the pop-up? After that, please check the browser console[image] for any messages.

These details will help us better understand what might be going wrong in your case.

Thank you once again, and I look forward to your reply.

Best regards,
Stefan

Hello @janiece.lincoln,

Thank you for your message and for providing the details. :pray:

It’s unusual that the EmojiPicker element isn’t displaying, especially since your setup appears correct and the demo is functioning as you demonstrated. Could you please check if there are any conflicting plugins or scripts in your app that might be causing this issue? Also, have you looked at your browser console for any warnings or error messages[image]?

To further investigate this, could you please add our Support Team’s email to your application’s list of collaborators and share the app link with us? This will enable us to examine the app to replicate the problem and further check it.

To add our Support Team as a collaborator, please follow these steps in the Bubble Editor: Settings > Collaboration > Add email support@zeroqode.com.

Please also share instructions on how to reproduce the issue, including the name of the page where the plugin element is located, the specific group, and a brief description of where to click and any credentials needed to open and replicate. If possible, include a short Loom video that outlines these steps.

Thank you for your understanding and cooperation.

Looking forward to your reply.

Best regards,
Stefan

@Stephan Requested recording:
Access granted. I’d just ask no changes be made, I’d rather be made aware what to change first.

1 Like

Hello @janiece.lincoln,

Thank you for providing the details and adding us as collaborators. :pray:

Upon review, it appears that in the “Add icon” workflow, you used the Bubble action “Show an element” instead of the plugin’s action “Show an emoji picker”, which can be found under the Elements actions tab[image]. The setup for both actions appears identical in the workflow, which may have led to the oversight.

Could you please update this in your app and let me know if everything will work fine? And if you have any other questions or need further assistance, feel free to reach out. It’s always a pleasure to collaborate. :hugs:

Thank you once again, and I look forward to your response.

Best regards,
Stefan

Stephan! THNAK YOU! Worked like a charm. Cheers!

1 Like

Hi @janiece.lincoln,

Glad to be helpful. Please feel free to reach us again when you need some help or assistance. It will be a pleasure to cooperate. :slightly_smiling_face:

By the way, if you like our plugin you can rate it by going to the Plugins tab in Bubble editor. Find the plugin by name and give it as many stars as it deserves. We would appreciate it a lot!

Take care!
Stefan

@Stephan is it possible to be able to save the emoji that is in this input field into the database? It seems I can save other characters in the db however the Emoji doesn’t save. It could be user error but I figure it’s a special character. Can you advise?

All saves to the database through the input field I am using for this emoji appear like this (screenshot)

Screenshot 2024-06-26 at 9.07.48 AM

1 Like

Hello @janiece.lincoln,

Thank you for your question.

To save emojis in the database, please ensure that the field type is set to “text”. I have created a test page [link] where you can see how emojis are saved in db and displayed in the Repeating Group[img].

Could you please review this page and try implementing it in your app, and let us know if everything will work fine for you.

Thank you once again, and we look forward to your response.

Best regards,
Stefan

@Stephan I confirmed that the field type is correctly set to “text.” I also tested and see that I can save a alpha value like a letter in this field however the emoji is the only one that is not saving to db.

Recording: [redacted]

Hello @janiece.lincoln,

I hope you’re doing well!

I’ve taken a look at the app, and it seems the cause with the emojis not displaying is due to the character set limitation in the input field[image]. Emojis are encoded in UTF-16 format, which means they require more than one text character space to display correctly.

Could you please try increasing the character limit to see if that resolves the issue in your app?

Thanks again, and I look forward to your reply. :star2:

Best regards,
Stefan

@Stephan That is helpful. I removed character limits and if a value (the existing emojis you added) is present, it will auto-save when the input field is updated. However, if the data field (and thus input field) is empty and I try to add an emoji, it adds in the user experience but doesnt save in the database. Did you add emojis in through the database or through the ui?

Hello @janiece.lincoln,

Thank you for the message.

I’ve also noticed the same thing: when you add an emoji, the “value is changed” event isn’t triggered until you click on the input again and then outside the input field. I’ve forwarded this to our development team for further investigation and will update you as soon as I receive any feedback.

In the meantime, you might try using the “emoji picker is closed” event to set focus back to the input, ensuring the value is saved when you click elsewhere[image]. Alternatively, you can save the value in the database directly from the “emoji picker is closed” event[image].

Please let me know if this workaround is effective for you or if you have any further questions.

Have a wonderful weekend!

Best regards,
Stefan

Hello @janiece.lincoln,

Hope this message finds you well.

I am writing to follow up on our previous discussion regarding the Native Emoji Picker+ plugin. Specifically, you observed that the emoji was not being saved automatically and the “value is changed” action was not being triggered when you inserted an emoji in the input.

Good news! In the latest version, 1.6.0, we have fixed this issue. Now, it will work correctly when you add or change an emoji in the input.

Could you please update the plugin in your app, test it out, and let me know if everything is working well on your side? If you have any other questions or ideas, please let us know.

Thanks so much for bringing this to our attention.

Looking forward to hearing from you soon.

Best regards,
Stefan