Skip to main content

GIPHY

The GIPHY integration lets users browse and send animated GIFs directly from inside the message input area. The picker calls the GIPHY API on demand — no GIFs are stored on your server.

Setup#

  1. Create a GIPHY developer account and request an SDK key
  2. Open WP Admin → Better Messages → Settings → Integrations → GIFs and set Provider to GIPHY
  3. Paste your GIPHY API key and save

A GIF tab appears in the message picker once the key is configured — in 3.0 emoji, stickers and GIFs share one picker button rather than each having their own.

Production requirements#

When you move to a GIPHY production key, GIPHY requires you to display the "Powered By GIPHY" attribution badge on every preview. Add the CSS below to your site (via WordPress's Appearance → Customize → Additional CSS or the better_messages_css_customizations filter).

The first rule targets a sent GIF in a message. 3.0 writes those as .bm-gif. Messages sent before the upgrade still carry the old .bpbm-gif, and message bodies are never rewritten, so both classes are listed and both are needed. The second rule targets the GIF picker's own tiles, which are .bm-gifs-selector-gif-container in 3.0.

.bm-gif:before,
.bpbm-gif:before {
    position: absolute;
    content: "";
    width: 54px;
    height: 24px;
    bottom: 5px;
    right: 5px;
    background-color: black;
    background-color: rgb(0 0 0 / 50%);
    background-image: url(https://cdn.better-messages.com/images/giphy.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 18px;
    padding: 0;
    color: white;
    border-radius:3px;
    opacity: 1;
    font-size: 10px;
    line-height: 17px;
    z-index: 10;
}

.bm-gifs-selector-gif-container:before{
    position: absolute;
    content: '';
    bottom: 5px;
    left: 5px;
    width: 54px;
    height: 24px;
    background-color: black;
    background-color: rgb(0 0 0 / 50%);
    background-image: url(https://cdn.better-messages.com/images/giphy.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px 18px;
    padding: 0;
    color: white;
    border-radius:3px;
    opacity: 1;
    font-size: 10px;
    line-height: 17px;
    z-index: 10;
}

See also#