[PLUGIN] - TinyQ - (Text highlighting/comments)

Showcase Plugins
1

Hi all,

A small but very useful plugin here, TinyQ (aka tiny quoter).

It allows for a customizable popup to appear above any text that is selected on a page which you can then use to Tweet, create a Facebook post or do anything else with. The image below shows the default options but you can add up to 5 customized icons and associated URL’s by visiting the following page and copying the SVG path into the element options.

SVG Vectors

If you want some SVG text to appear instead, then you can generate the SVG using this demo I put together…

https://paul-testing-4.bubbleapps.io/font_to_svg

It’s configurable so you may change the background color and enable the ability to drag the popup around the screen if you want. Any text that is selected, gets put into an exposed state and various events trigger depending on what you do.

image
image882×396 24.3 KB

You can also highlight any text in any color, trigger events when different highlighted text is clicked, use coordinates to move comment boxes to your highlighted text, get any highlighted text or selected text etc. All things to enable you to build up your own comment recording system and set both the background and text colors to perhaps assign various selection colors to specific users.

image
image1144×843 70.9 KB

PLUGIN
https://bubble.io/plugin/tinyq-1644871875958x568208585554657300

DEMO
https://paul-testing-4.bubbleapps.io/tinyq

For documentation purposes, here are the details…

ELEMENTS

TinyQ
This element needs to be placed somewhere on your page. It’s not visible when you preview your page but it is required for the functionality to work.

  • Background color
    Specify the background color of the popup, values can be HEX or RGB.

  • Is draggable
    When set to Yes, the popup becomes draggable.

  • Hide Facebook icon
    This option hides the default Facebook icon.

  • Hide Twitter icon
    This option hides the default Twitter icon.

  • Attribute Id
    When you specify an attribute Id (element Id) here, any text within that element which is highlighted will use the defined Background color and Text color options below. If you leave this field blank but define the colors below, then the colors will apply to all text on the page.

  • Text selected event
    When set to Yes, any text selected on the page will trigger the ‘text has been selected’ event. When set to No, the event will only trigger when text is selected within the given element that you specified an Attribute Id for. If you have this option set to No and there is no Attribute Id set, then the event will not trigger at all.

  • Text BG color
    This is the background color of the highlighted text.

  • Text color
    This is the text color of the highlighted text.

  • Custom Icon
    Use the full SVG path to display a custom icon here. If you want to keep the same formatting as the original icons, then set the width and height values to 24 and the fill value to white.

  • Custom URL
    Supply a URL to go to when this custom icon is clicked. If you want to include the highlighted text within any parameters of this URL, then specify {text}, for example: https://www.google.co.uk/search?q={text}

EXPOSED STATES

  • Selected text
    Contains any text that was selected.

  • Is being dragged
    Indicates if the popup is being dragged or not.

  • Mouse (X) coordinates
    Shows the mouse X coordinates when the page is clicked.

  • Mouse (X) coordinates
    Shows the mouse Y coordinates when the page is clicked.

  • Highlighted text
    Contains the highlighted permanent text that is clicked.

ACTIONS

  • Highlight text
    This action highlights text passed to it and makes it permanent. To be able to use this action, you must specify an Attribute Id within the plugin element settings.
    .
    -Text BG color
    -This is the background color of the highlighted text.
    -Text color
    -This is the text color of the highlighted text.
    -Text
    -This is the text for which you want to search for and highlight, this is case sensitive.

  • Deselect text
    This action will deselect any text on the screen.
    .
    -Clear state
    -When set to Yes, will also clear the ‘Selected text’ state.

EVENTS

  • A TinyQ facebook icon clicked
    Triggered when the Facebook icon has been clicked.

  • A TinyQ twitter icon clicked
    Triggered when the Twitter icon has been clicked.

  • A TinyQ first custom icon clicked
    Triggered when the first custom icon has been clicked.
    (There are 5 of these events setup, one for each of the custom icons).

  • A TinyQ text has been selected
    Triggered when text has been selected.

  • A TinyQ drag has started
    Triggered when dragging is enabled and a drag has started.

  • A TinyQ drag has stopped
    Triggered when dragging is enabled and a drag has stopped.

  • A TinyQ permanently highlighted text has been clicked
    Triggered when any permanently highlighted text has been clicked.

CUSTOM ICONS

When using any of the custom icon fields, the SVG needs to look like this:

<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path fill="#BD081C" fill-rule="evenodd" d="M12,0 C5.37225,0 0,5.37225 0,12 C0,17.0835 3.16275,21.426 7.62675,23.17425 C7.52175,22.22475 7.42725,20.76825 7.66875,19.73175 C7.88625,18.79575 9.07575,13.767 9.07575,13.767 C9.07575,13.767 8.7165,13.0485 8.7165,11.98575 C8.7165,10.317 9.684,9.07125 10.88775,9.07125 C11.9115,9.07125 12.4065,9.84 12.4065,10.76175 C12.4065,11.7915 11.751,13.3305 11.41275,14.757 C11.13,15.95175 12.01125,16.926 13.1895,16.926 C15.3225,16.926 16.962,14.67675 16.962,11.43075 C16.962,8.5575 14.89725,6.54825 11.949,6.54825 C8.535,6.54825 6.531,9.1095 6.531,11.75625 C6.531,12.7875 6.92775,13.89375 7.4235,14.4945 C7.52175,14.61375 7.536,14.71725 7.50675,14.83875 C7.416,15.21825 7.2135,16.03275 7.17375,16.2 C7.12125,16.419 6.99975,16.46625 6.7725,16.3605 C5.27325,15.66225 4.3365,13.4715 4.3365,11.71125 C4.3365,7.926 7.08675,4.44975 12.2655,4.44975 C16.428,4.44975 19.6635,7.416 19.6635,11.3805 C19.6635,15.516 17.05575,18.8445 13.43625,18.8445 C12.2205,18.8445 11.0775,18.21225 10.686,17.466 C10.686,17.466 10.0845,19.75725 9.93825,20.319 C9.6675,21.36075 8.93625,22.66725 8.4465,23.4645 C9.57,23.8125 10.76325,24 12,24 C18.62775,24 24,18.627 24,12 C24,5.37225 18.62775,0 12,0"/>
</svg>

This example is taken from here.
To keep the same formatting as the 2 original icons, you can set the width and height values to 24px and the fill value to white.

To include the selected text into the URL which is opened upon clicking the custom icon, have {text} somewhere in your URL. For example, if the selected text was “marvels” and you wanted to do a Google search, then your URL might look like: https://www.google.co.uk/search?q={text}

And that’s it!
Clean, simple and it works brilliantly.

Happy bubbling!

Paul

8 Likes
2

Wooo! This is brilliant, @pork1977gm !!

Can’t wait to get my hands on this. Thank you!

3

No worries, hope it proves a useful addon!
I’ll let you as soon as it’s live.

4

Amazing. Can’t wait to test it out. May use this for a proofreading tool.

5

Cool plugin, can think of it being used to highlight more information about text - e.g. music lyric explanations

6

Yep that’s good idea and it will work with that type of thing too. Still waiting on Bubble to approve it.

7

The plugin is now available in the plugin section.

TinyQ

8

Thanks for putting the work into this and making it available.

Does it allow me to highlight text as a design element that’s visible on page load?

Like the green text here that would be visible when someone visits the page?

highlighted-text-design
highlighted-text-design726×71 27.5 KB

Thanks.

9

No worries, yep it should be able to do that, it can highlight any text on the page. Just give us a nudge if you need help with anything.

10

Great!

I’ve bought the plugin and tried it and can’t figure out how to get it to highlight text as a design element that’s fixed on the page and visible on page load.

Could you explain it to me in step by step detail? I’m new to Bubble and have a design background, not a coding background.

I downloaded the plugin. I dragged it to the page (above the text I want highlighted.) I clicked on the TinyQ Element Property Editor popup. What are the next steps?

I don’t see where I can put text in the TinyQ Property Editor? Or does it go over the text in another element somehow?

Thanks a ton.

11

Sure, give me a bit and I’ll get back to you.

12

So you have the plugin element and the main option to get it working is the Attribute Id option shown here…

image
image364×726 24.3 KB

Now for whatever element you have on your page that you want it to work with, for example a text element, you should see the Attribute Id field at the bottom like so…

image
image916×853 57.2 KB

Give this a name and use that same name inside the plugin Attribute Id field.

If you can’t see this field then go into your Editor settings and check the Expose the option to add an ID attribute to HTML elements option.

image
image1834×668 47.1 KB

The rest of the fields within the plugin element just control various settings so read all those documentation fields under each setting and they should explain what each one does in more detail.

Try that and see how you get on.

Paul

13

Hey @pork1977gm. Love the direction of this plugin. Pretty nifty. Wanted to check it out but am getting a “page not found” with the demo URL.

14

Ah hang on, let me sort that, I didn’t realise that was broken

15

Should be this:

https://paul-testing-4.bubbleapps.io/tinyq

16

Brilliant! Everything you build adds value for me Paul, ha.

Is it’s possible for the ‘permanent highlighted text’ to stay highlighted / clickable after the user has refreshed the page - or if they say left the page and returned later.

I’d assume you need to save the permanent highlighted text in the database and create some ‘on page load’ workflow to get that to work?

Keep doing the good work!

17

hey Josh, sorry for the delayed response! you should be able to do this in the normal way where you run the appropriate action but save whatever it needs to the database after the first time, then just re-run on page load or some other event which triggers when you need it to.

1 Like
18

Is their a way to use your plugin to call an api call. For example: I want to be able to highlight the text and call an api call thru a workflow. Can you please direct me on how to do this. I don’t have a url for this call.

19

Hi @askmonalill

Yep, you should be able to do that. When the text is selected, the event called “text has been selected” will trigger and then you can access the “Selected text” state inside it, that will contain the text within the selection made. From there you can use that to pass into any API call you setup.

Paul

20

I need this to be on one of the button calls. Can you expain how to do that? Thanks in advance for your help