11. Send a GIPHY in a Message

In order for GIPHYs to display in your app, you will need GIPHY API keys. Follow these step-by-step instructions to obtain your API keys.

GIPHYs are displayed in the app using Bubble's GIPHY plugin. When the Current User clicks either the Button Attach Giphy (Desktop) or Button Attach Giphy (Mobile) elements, the FG - Add GIPHY to Message element becomes visible (and the FG - Fade Overlay element also becomes in order to darken the rest of the page):

Editor

Preview

The Current User can search for GIPHYs using the Input GIPHY Search element. This changes the Repeating Group GIPHYs's data source so that GIPHY returns that search term's GIFs:

When the Input GIPHY Search element is empty (i.e., the Current User has not yet entered a search term), GIPHY will automatically display the search term "happy"'s GIFS in the repeating group. You can change this default search term in the conditional on the Repeating Group GIPHY's element.

When the Current User would like to send a particular GIPHY, clicking that GIPHY once will 'white-out' the other GIPHY cells and show the Button Send GIPHY element over-the-top of the selected GIPHY's cell:

Clicking the Button Send GIPHY element confirms the Current User would like to send that GIPHY, and sends it as a new Message.

If the Current User doesn't click the Button Send GIPHY element, (i.e., the Current User doesn't want to send the selected GIPHY), the Current can click anywhere outside of that selected GIPHY's cell to 'de-select' that GIPHY, and choose a different GIPHY.

More information on how GIPHYs are selected and sent as new Messages can be found in the D. Files/Images/GIPHYs workflow folder.