ᴺᴱᵂ ᴾᴸᵁᴳᴵᴺ 🐝 Emoji picker | Finally a complete native and customisable emoji picker

[vnihoul77]

Emoji picker for you app

Hi there!
We just release this new plugin to the Bubble marketplace !

→ The most advanced emoji picker for Bubble. Supports native IOS emojis, custom emojis (like Discord), fully customisable picker and highly reliable.

Add custom images and GIFs!
Automatically bind to input or retrieve in the element state
Supports auto, light and dark themes, with the ability to extend them to create your own
Full support for skin tone variations where applicable
Supports over 30+ locales
Emojis are searchable by name or tags
Remembers recently used emojis
Fully keyboard accessible
Emoji data is loaded once from a CDN and cached in the browser for subsequent sessions.
Auto and custom positioning to the reference element
Smooth and animated
Fully customisable categories, categories order and picker tabs

Native emojis.

Add your own emojis.

Support dark theme and more.

[Jici]

Hi! Actually your demo doesn’t work. No emoji are loaded
When you say

Developped and maintained by Plugbee

Do you mean that the picker doesn’t use any external library? Just something you have created?

Finally, does it work with multiline or Rich text?

Thanks

[Jici]

Forget my question for the library. I was able to see you are using picmo (that I was also working on a new plugin from this library). It’s a good choice.

[vnihoul77]

Hi @Jici !

@Jici

Actually your demo doesn’t work. No emoji are loaded

Do you have more details to provide? Feel free to send a DM.
It was tested on 5+ devices and browser before release and it works all fine on our end

@Jici

that I was also working on a new plugin from this library

Sorry for the competition It indeed seemed like the most complete one. Lots of new emoji picker plugins recently with also the one from @wesleywsls

Finally, does it work with multiline or Rich text?

Yes! It does work with Bubble multiline inputs. Not with external rich text plugins though, as they are not propper HTML inputs but textareas. But that’s a good tip, we’ll implement if there’s more demand!

[Jici]

Everything seem to work fine now
There’s was an error loading emoji earlier

Sorry for the competition It indeed seemed like the most complete one. Lots of new emoji picker plugins recently with also the one from @wesleywsls

No problem! I didn’t get time to fully complete it (mostly to add emoji to rich text was the last part). The good news is that Bubblers will have a nice picker to use now

[vnihoul77]

Cool!
Yes indeed I faced myself many times searching for a good emoji picker that was both reliable and that has the native Apple emojis. So this with the custom emojis was really what I wanted!

[saviorabrams]

@vnihoul77 Using this plugin and love it! I had one question though, I’m trying to add some styling to this element using CSS and having a hard time getting it to work.

.my-picker {
–background-color: #00e350 !important;
}

This code doesn’t work unfortunately. Any help here would be appreciated.

[vnihoul77]

Thanks for reaching out!

Have you tried the Custom class field? It allows you to add a class name that you already defined and apply it directly to the picker.

Let me know if that works for you!

[saviorabrams]

It doesn’t work on my end. I would like to change the background to white and perhaps keep the element float to the bottom. Who do I define a class name? I’ve already named it emojipicker on the Element ID.

[vnihoul77]

Could you share a link to your editor and a page where the plugin is integrated?
This way I can better assist you!

Victor

[louis2]

Congrats for this plugin, it’s impressive. I don’t usually pay for plugins but this one is a no brainer.

Yet, it’s not 100% perfect because it doesn’t work in a floating group:

@vnihoul77 any idea on how to fix this ?

[vnihoul77]

Thanks for the sweet comment, genuinely enjoy it And really cool use of the plugin with your notion like app.

Interesting! Works on my end with floating groups.

• Are you using the old or new responsive editor?
• Did you apply a custom class on the picker?
• Ideally, do you have a preview page to share? (through PM also possible)

In the meantime, if you need an emergency fix, you could use a custom class with a very high z-index, as defined in this section of the documentation.

[louis2]

Thanks @vnihoul77 for the reply!

• I use the new responsive editor
• I don’t have any custom class on the picker (I guess )
• Unfortunately, I don’t have a preview mode that will allow you to test on your side yet.

I tried to add a custom class but I think I don’t follow the documentation properly because I don’t succeed to make it work.

To add more details about the layout:
the picker is in a RE => inside a RG => inside another RG => inside a floating group

Do you know what’s wrong when I try to add the custom class ? Probably the name in front of .my-picker?

Thanks again for your help

[abdul]

@vnihoul77 does your emoji picker work for repeating groups? I am seeing an issue with it working only with the first item of the repeating group. Here are the screen recordings:

Issue: Screencastify
Setup: Screencastify

[abdul]

Hi @vnihoul77 having trouble with your plugin working on popups. Looks like a z-index issue. Also adding a custom class to set the z-index doesn’t work. Thoughts?

[abdul]

Any update on this?