Build a URL Shortener with Volt and Folio
This episode is for members only

Sign up to access "Build a URL Shortener with Volt and Folio" right now.

Get started
Already a member? Sign in to continue
Playing
09. Copying to the clipboard with a button

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
Okay so to finish up we want a handy copy button when we go ahead and click this get short url and we want this to appear here and when we click that we want that to copy to the clipboard and then show a little status message so to do this we're going to go ahead and lean on this alpine clipboard plugin we're going to pull this in to our project there's a couple of things that
00:20
we need to do here because when we register plugins with alpine we need to disable live wires alpine integration and then basically run our own so let's go ahead and just start to design this out first of all so over in our area just here we have this div what we could do here is wrap this in another div and then we're going to have our button just down here so let's create
00:50
our button that looks similar to our normal button that's going to be a little bit too big at the moment and let's just pull this down so it's a little bit easier and we'll go ahead and set the type to button again because we don't want to resubmit that form okay so at the moment this is going to look a little bit weird let's just go ahead and grab a url and yeah there we go just
01:11
hovers down the bottom so with this what we can do is set the outer container to relative and then we can absolutely position this button inside of the input so to do this we're going to go ahead and set this to absolute we'll set the inset here to y2 and then we'll set the right to 2 so what that will do is pull it just in there now we need to make this button a little bit smaller as well
01:37
so let's go ahead and figure out what we've got here so we've got a padding on the x of 10 that should be able to be reduced a little bit we've got a margin on the top of 4 which we don't need we've got a height of 11 we could bump that down to 10 and that should be just about it let's have a look yeah there we go so there's our button now with this we're going to call this copy like so
01:59
because that makes sense so when we click on this we want this content copied to the clipboard now before we go any further this plugin does require that you're working with https because the functionality behind it within javascript requires that you have https enabled so i have https enabled go ahead and do that now if you're following along and you need this to work
02:23
okay so we're going to go ahead and pull this plugin in so let's just go ahead and install this with npm and then we'll take a look at how we figure this out because we're going to have an issue otherwise so basically to register this plugin we already have alpine imported we import the clipboard plugin we go ahead and register the plugin and that's it but the only problem is
02:46
over in app.js we don't have alpine pulled in if we did do that it's going to conflict with livewire's alpine version so the first thing that we want to do is head over to our app layout and disable livewire scripts so we're going to go ahead and use the livewire script config directive now this is going to break everything so if we head over here and we try and do anything you can see it's
03:12
just submitting the form nothing is actually working here which is fair enough because we have disabled the implementation what we can now do though is over in app.js we can pull alpine and livewire in and manually register this so then we can attach plugins to alpine now we can actually head over to the docs to see an example of this and in fact the clipboard plugin is shown
03:34
as an example here we've already gone ahead and disabled these so we can just go ahead and pull all this in to be honest because we've already got the clipboard plugin in there it just so happens that the example uses the plugin that we are actually using so as you can see here we're importing livewire and alpine from the javascript within livewire then we're going ahead and we are
03:58
starting livewire so that's just what normally happens behind the scenes but in between that we're going ahead and pulling in the clipboard plugin registering it directly on alpine so now livewire's alpine implementation uses the plugins that we've registered so now that we've done that we just come away from this and give this a refresh we shouldn't see any errors in the console
04:18
everything should work as normal but now we have access to that clipboard plugin which is great so now over in here this copy button we need to make this an alpine component so let's use x data on here and within our data we want to store the url so i'm going to go ahead and create out a url property in here and that is just going to contain the value that we have here
04:45
we don't want to be really reading from this element it makes sense just to locally store this within this alpine component now so now what we're going to do is when this is clicked we can use this new plugin to go ahead and copy this to the clipboard so to access this plugin we just use the clipboard method and then we choose the property that we have stored within this alpine
05:08
component to copy to the clipboard so that's pretty much it we are going to make some tweaks to this but let's see if this works so i'm going to go ahead and say google.com get short url that's g7 so let's click copy and let's open this up and yeah sure enough that has copied the correct url and obviously we know this redirects us over okay so we can make some improvements to this because
05:33
when i do click copy here it doesn't really look like anything is happening so what we can do is introducing a copied property inside of this component we can go ahead and set this to true and then we can go ahead and set a timeout to set this back to false we'll do that in just a second but we can change around what value we see in here based on whether it's been copied or not
05:56
so to do this we're going to go ahead and set some x text in here and if we have copied this so if it has if it has been clicked and this is true we'll go ahead and say copied otherwise we'll just say copy now we can leave this in here it's fine but that will go ahead and change that around so let's try this out let's go ahead and enter a url again click copy and there we go it changes
06:24
over to copy so set a property to true and then change the text of the button depending on whether it's been copied but we don't really want this hanging around so inside of here what we can do is go ahead and set in a timeout within javascript and we'll set that to disappear after a couple of seconds and then we can just set copied back to false so let's look at the whole flow go ahead
06:49
and enter a url in here click this copy eventually after two seconds that's going to go back to copy but we know it's been copied and we now have the url which of course redirects us over nice so our copy to clipboard functionality is done that changes that over nicely so we can actually see that this has been copied

Episode summary

In this episode, we’re adding a super handy "Copy" button to let users easily copy their shortened URL to the clipboard. We want this button to show up when the short URL is generated, and when a user clicks it, it should copy the link and show a brief status message saying it’s been copied.

To achieve this, we use the Alpine Clipboard plugin. We go through the steps of pulling that plugin into our project and setting it up—which involves tweaking Alpine and Livewire’s integration so they play nicely together. We demonstrate how to disable Livewire’s built-in Alpine, then register our own instance with the clipboard plugin included. This way, we can use the clipboard functionality in our components.

Next, we work on the UI: positioning the button nicely inside the input, making sure it looks good and fits well. After wiring up our Alpine data and methods, clicking the button successfully copies the URL!

To make the user experience better, we add a "copied" feedback message that shows briefly when the button is clicked, using Alpine’s reactivity and setTimeout. In the end, users know exactly when the URL is copied, and the feedback disappears after a couple of seconds. The "copy to clipboard" enhancement is now complete and working smoothly!

Episode discussion

No comments, yet. Be the first!