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 → GIPHY
  3. Paste your GIPHY API key and save

The GIF button appears in the messenger reply form once the key is configured.

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 Appearance → Customize → Additional CSS or the better_messages_css_customizations filter):

.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;
}

.bpbm-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#