Integrate external JS into app

Hello everybody,

I’m trying to integrate some external javascript (this) to add an emoji picker to my app. I almost tried everything and can’t seem to make it work, html element, toolbox plugin, etc.

What am I doing wrong?

I know there is already an emoji plugin, but it doesn’t suit my needs.

Thank you all.

Which script do you try to use?

I’m trying to add this library: https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@3.0.3/dist/index.min.js

And trigger this code on a button that will add the emoji to an input:
const button = document.querySelector(’#emoji-button’);

const picker = new EmojiButton();

button.addEventListener(‘click’, () => {
picker.togglePicker(button);

});

picker.on(‘emoji’, emoji => {
document.querySelector(’#emoji-input’).value += emoji;
});

You can see how it works here

Yes I know this library and this is one (of two) I’m actually considering to update my emoji picker plugin.
do you have any error in console log? Can you share what you have tried in Bubble editor?
Do you just need a picker? No insert in text area or input?

Thank you for your answer. I don’t have any error in console log. No, I need an emoji picker that adds the emoji to a multiline input. I used your plugin, but as I have conditions on my input, I can’t use it.

Here’s my test page link
Editor link

So you will need more to be able to use this library because this is only an emoji selector. You will need to also use a script to insert the emoji in th text.
The new version of the plugin will no override the original input that will be a lot better.
When I’ll get a chance, will take a look at your editor

1 Like

Thank you again for your answer. It might seem stupid, but how come it work as is in JS fiddle example?

Oh, this sounds cool, when do you think you will release the new version?

I think the beta version will be ready next week for testing.
For JS. You can use HTML element, Page header or a plugin. This depend of the script you need to use. There’s an important thing to consider: Order Bubble load element. So if your HTML element load before the input is visible, your script will not find the input. In some case you might need to think to use conditionnal like input is visible, this element is visible on html element. The script will start to un when element is loaded.

Alright, I might wait for your plugin then. I wouldn’t have thought putting emoji in an app would be that a headache :sweat_smile:

The script itself is not very complex, but you will need more to make the input receive the selected emoji :wink:

2 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.