Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Logo

ProductHunt Floating Prompt

npm version npm downloads GitHub Medium Badge Twitter: sandochee

⚡️ Invite your users to support you on product hunt with this floating prompt (and mobile responsive).

Demo

Check out the demo in these websites:

How to use

The ProductHunt Floating Prompt is very easy to use, just copy paste the following code or use the npm package. A few customization such as localstorage to appear only once, color, position are availables check the options below.

Easy way (using the JSDelivr CDN)

Just add this code to your html page:

<script src="https://cdn.jsdelivr.net/npm/producthunt-floating-prompt@1.0.7/lib/producthunt-floating-prompt.min.js"></script>
<script>
  FloatingPrompt({name:'GitNews', url:'https://www.producthunt.com/posts/gitnews'});
</script>

Using NPM

npm install producthunt-floating-prompt

Then add the following javascript code:

import FloatingPrompt from 'producthunt-floating-prompt';

FloatingPrompt({name:'GitNews', url:'https://www.producthunt.com/posts/gitnews'});

For Nuxt.js

Use nuxt-floating-prompt-module for Nuxt.js

Options

Here are the option availables:

var options = {
  name: 'My super product',
  url: 'https://www.producthunt.com/posts/my-super-product',
  text: 'My customized text', // default: Hi, do you like ${name} ? Don't forget to show your love on Product Hunt 🚀
  buttonText: 'My customized button', // default: ${name} on Product Hunt
  width: '500px', // default: 300px
  bottom: '32px', // default: 32px - postition from the bottom
  right: 'unset', // default: 32px - position from the right
  left: '32px', // default: unset - position from the left
  colorOne: 'red', // default: #da552f - first color of the gradient
  colorTwo: 'blue', // default: #ea8e39 - second color of the gradient
  saveInCookies: false, // default: true - if true it will use localStorage to appear only once
  target: '_parent' // default: '_blank' - target of the link
}

FloatingPrompt(options);

Development

  • yarn build or npm run build - produces production version of your library under the lib folder
  • yarn dev or npm run dev - produces development version of your library and runs a watcher
  • yarn test or npm run test - it runs the tests :)
  • yarn test:watch or npm run test:watch - same as above but in a watch mode

⭐️ Show your support

Please ⭐️ this repository if this project helped you!

patreon.png

🍺 Buy me a beer

If you like this project, feel free to donate:

  • PayPal: https://www.paypal.me/kanbanote
  • Bitcoin: 19JiNZ1LkMaz57tewqJaTg2hQWH4RgW4Yp
  • Ethereum: 0xded81fa4624e05339924355fe3504ba9587d5419
  • Monero: 43jqzMquW2q989UKSrB2YbeffhmJhbYb2Yxu289bv7pLRh4xVgMKj5yTd52iL6x1dvCYs9ERg5biHYxMjGkpSTs6S2jMyJn
  • Motive: MOTIV-25T5-SD65-V7LJ-BBWRD (Get Motive Now: https://motive.network)

About

⚡️ Invite your users to support you on product hunt with this floating prompt

Topics

Resources

License

Releases

No releases published

Packages

No packages published