Bring a Giphy keyboard to your app!
Giphy Keyboard for Ionic
If you want to let your users directly use Giphy amazing gifs, this plugin is what you need. Simply connect your app with the Giphy database by automatically show the gifs referring to what your users are looking for!
With the Giphy keyboard you can:
- show trending gifs by default;
- show gifs matching the user's search;
- easily change a display limit for gifs;
- easily integrate a cool keyboard for your users (for a chat, tinder-style!);
- keep control of your workflow: edit callbacks when gif is tapped, when the keyboard is closed, ...
If you run into any issues, feel free to get in touch with me, I'll give you help asap! :)
(and the most important thing: enjoy coding with both ionic and giphy!)
Try using ionic View, app ID: E9E3119F.
1 - If you're not using
angular-resource for your project already, insert it after importing
NB: We need
angular-resource as it is a
2 - Copy the
giphy-keyboard directory inside
/www/lib/. You'll now have access to
3 - Insert
giphy-keyboard.js before loading your
4 - Insert
giphy-keyboard.css (and eventually edit it), inside the
head tag. I'd personnaly recommend this configuration:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="lib/giphy-keyboard/giphy-keyboard.css" rel="stylesheet">
5 - Inject
giphyKeyboard dependency inside your application module:
angular.module('myApplication', ['ionic', 'giphyKeyboard'])
You're now ready to use the
giphy-keyboard brings you now one ready-to-use
<giphy-keyboard> tag, and a
Giphy service inside your controllers to interact with the plugin!
For an application example, simply refer to this archive
/demo directory (
If you want to make it live, copy/paste the
/demo/www directory and replace your
www directory inside your project with these files (or execute
$ ionic start giphy-keyboard-test then do the same replacing operation with the new
www directory just created).