Content Types

At GIPHY, we believe everything should move and it’s part of our mission to help make everyday conversations more animated. With our growing list of content types, expressing yourself with GIPHY has never been easier.

Please note that the Clips, Emoji, Text, and GIPHY Text content types are only available through the SDK.

Clips

GIPHY Clips (GIFs with Sound) is our newest format and sits at the intersection of GIFs and Video. Our Clips Library is built with all of the unforgettable quotes, cultural moments, reactions and characters that we need to express how we are feeling, what we think and who we are.

We are making short form expression discoverable via GIPHY Clips Search, with Clips from official content partners and GIPHY Studios. Every day you will find new Clips from the biggest names in Entertainment, Sports, News, and Pop Culture; all trimmed to their most essential moment.

GIFs

GIFs are short, looping, moving images. Need we say more?

Stickers

Stickers are GIFs with transparent backgrounds. They’re great for layering animated content on top of all kinds of use cases: messaging apps, stories (e.g., IG, Snap, FB etc.), or games. Basically, any time a square frame just won't do.

Emoji

GIPHY Emojis are fully animated emoji stickers. No longer are these familiar, emotive faces frozen in place, as GIPHY emoji brings life and motion to some all time favorites with inclusive representation, as well as some new (and uniquely GIPHY) emojis.

Text

GIPHY Text features animated text-based stickers, making it easy to add that perfect amount of sarcasm, enthusiasm, or whatever emotion is needed to the conversation.

GIPHY Text

GIPHY Text is dynamically generated using the user’s search term and our pre-populated set of styles. This content type can be leveraged when you know exactly what you’d like to say and would like to animate your words.

GIPHY Alt Text

Alt text on GIPHY is now available for our most popular pieces of content based on top search terms, with plans to gradually roll out alt text to more of our library. This means that alt text will automatically be read aloud via screen reader devices. For GIPHY integration partners, alt text can be leveraged via the API. If interested, please reach out to bd.team@giphy.com.

Customization

Customizing your GIPHY mobile SDK integration

As slick and finely-tuned as the templates are, we know many developers want to have more control over the look and feel of the GIPHY search experience in their app. We made some adjustments to the mobile SDK to give teams the flexibility to fit GIPHY seamlessly into their app, while still making integration a lot easier than starting from scratch.

With the latest release, you can leverage the grid component of the GIPHY SDK, which makes it easy to populate a grid of gifs and stickers with search results or trending feeds. The component takes care of requesting content from the GIPHY API, loading, caching, and rendering images in a customizable grid, and leaves the rest of the experience up to you.

We affectionately refer to this component as "Grid-Only". Thus, to enable the GIPHY experience, the rest of the UI (text fields, buttons, etc.) is provided and wired up by you.

Choosing the right solution for your app

We offer two solutions for the SDK user interface: pre-built templates which handle the entirety of the GIPHY experience, and a Grid-Only implementation which allows for endless customization. See the section below to figure out which solution is best for your app.

Templates

• The templates take care of all things GIPHY, including obtaining user input and displaying search results. Your app just presents the GIPHY view (GiphyViewController in the case of iOS, or GiphyDialogFragment in the case of Android) and we take care of the rest. The experiences provided by the templates are battle-tested and informed by our years of experience serving GIFs on mobile.

• The templates come in "waterfall" layout and can be customized to use light and dark color schemes. Give the example app a spin to see the different customization options in action.

Grid-Only

• We recommend going with grid-based only if the templates aren't flexible enough for your app's UI. While you have more control over the design, it's a bit less plug-and-play.

• Opting for the grid-based solution requires that you provide your own search field to obtain text input from the user, provide controls to allow users to select media types (if applicable for your experience), and update the grid's content in response to user interaction or searches.

GIPHY SDK for iOS

Get started with our iOS docs here.

Github Example Repo

Give the iOS SDK example app a spin to see what it's all about.

We also use Github for documentation, release notes, issue tracking, and more.

• View the docs.
• View releases
• Open issues or feature requests

GIPHY SDK for Android

Get started with the Android docs here

Github Example Repo

Give the Android SDK example app a spin to see what it's all about.

We also use Github for documentation, release notes, issue tracking, and more.

• Run the example app to see the GIPHY SDK in action with all of its configurations.
• View the docs.
• Open issues or feature requests
• View releases

GIPHY SDK for Web

The React SDK consists of Gif, Grid, and Carousel components. It uses the Fetch API to fetch data. All React SDK components also support Server Side Rendition(SSR). Here's a codesandbox for an example of SSR with next.js

Not using React? We have vanilla JavaScript components as well: Gif, Grid, and Carousel.

Installation

Install using npm or yarn:

yarn add @giphy/react-components @giphy/js-fetch-api

Checkout the github repo here.

Getting started

Here is a basic example of how to render a Grid of gifs using the Grid component and the Fetch API. You'll need an API key to fetch data that will be used to populate your components. You can apply for an API key here.

import { Grid } from '@giphy/react-components'
import { GiphyFetch } from '@giphy/js-fetch-api'

// use @giphy/js-fetch-api to fetch gifs, instantiate with your api key
const gf = new GiphyFetch('your api key')

// configure your fetch: fetch 10 gifs at a time as the user scrolls (offset is handled by the grid)
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 10 })

// Render the React Component and pass it your fetchGifs as a prop
ReactDOM.render(<Grid width={800} columns={3} fetchGifs={fetchGifs} />, target)

See the SDK in action

Live edit our SDK components here and try it out for yourself!

Learn more

• Fetch API - Wraps fetches to the GIPHY API and returns typed response. Fetch trending, search, related, emoji and more.
• React SDK - UI Component library using React.
• JavaScript SDK - UI Components you can append to the DOM.

GIPHY SDK for React Native

Get started with our React Native docs here.

Installation

yarn add @giphy/react-native-sdk
# or using npm
npm install @giphy/react-native-sdk --save
# Go to your iOS folder and run
pod install

Useful links

• View the docs.
• Give the React Native SDK example app a spin to see what it's all about.
• View releases
• Open issues or feature requests

Design Guidelines

How to Comply with our Attribution Policy

GIPHY loves its community and we want to support our GIF and Sticker creators. We believe that they should get recognition for the content they create. That’s why we’ve included a tap and hold UI that shows the creator’s username and enables users to easily search for more content by that creator.

The optional confirmation view mentioned above also includes the creator’s username, if one exists.

Sketch UI Kit

Ready to design your GIPHY experience? Download our Sketch UI Kit to drag and drop elements into your app and experiment with layouts, fonts, colors, and content that work best for you.

Brand Guidelines

While we have included a branded button for SDK users, you may need our logo for other purposes. Check out the links below to download GIPHY-approved logos and icons, along with our brand guidelines.

For general best practices related to the GIPHY brand, see our Brand Guidelines and be sure to check out our SDK License Agreement. By using GIPHY SDK, you are agreeing to the SDK License Agreement.

Submitting to the App Store

Details

Apple will require developers to provide information about their app's privacy practices in App Store Connect, including the practices of third-party partners whose code is integrated into their app. To make this process easier for you, we've provided the following list of boxes you will be required check when submitting your app to the App Store if your app integrates the GIPHY SDK.

We deeply respect the privacy of your users and only collect anonymized information about GIPHY use in order to improve the service. If you have any questions or concerns about GIPHY's data collection practices, please reach out to developers@giphy.com