Preview of Anvil App in WhatsApp

Anvil Q&A
1

What I’m trying to do:

Change the background color of the preview image that WhatsApp generates when I share a link to my Anvil app. The image I selected for my app (in Settings > General > App Logo) has a transparent background and very dark colors. WhatsApp gives it a black background so you can’t really see anything. Can I set the background color myself anywhere?

What I’ve tried and what’s not working:

Googled the issue, searched the forum.

1 Like
2

I doubt Anvil can do anything about this. It’s simply how WhatsApp treats logos.

What you can do about it is to give your logo a background color instead of transparent background

1 Like
3

It can be influenced by setting certain meta attributes in the head-section:

<meta property="og:image" content="blabla.com/img/logo.png">;

The problem is that Anvil automatically adds such links for the selected App Logo, which are prioritized by WhatsApp.

Changing the background color to white in the App Logo is indeed possible but looks less professional compared to most other page icons.

4

Try https://realfavicongenerator.net/

You can set a background colour and generate a new png image.

You can also specify a border radius so your image sits nicely in a home screen icon if you choose to use the PWA functionality (otherwise it can look cramped).

It will produce a full set of images for Desktop/Android/IOS.

5

This is quite useful for Favicons and PWAs, thanks. But WhatsApp doesn’t use the favicon as a preview image. It uses the icon specified here:

<meta property="og:image" content="blabla.com/img/logo.png">;

Anvil doesn’t let me set this one separately as far as I can tell.

6

Just use the 512x512 png image (after adding a background colour) as the Anvil App Logo. It should work better than the transparent one.

7

This is not an option as I want to keep the background transparent.

8

You may be looking for:

9

Did anyone get this working properly?

Ideally with the latest routing module.

But this doesn’t work for Whatsapp.

I have already tried this:

from routing import Route

class ProductRoute(Route):
    path = "/product"
    form = "Pages.Product"

    def meta(self, **kwargs):
        meta_data = {}
        meta_data['title'] = "Product Page"
        meta_data['description'] = "Details and specifications for our featured product."
        meta_data['og:title'] = "Featured Product"
        meta_data['og:description'] = "Learn more about our latest product release."
        meta_data["og:image"] = "asset:product.jpeg"  # Use a theme asset
        return meta_data
10

Any changes to meta data from code will not work since Whatsapp will never run your scripts. So whatever is defined in the static html will be what it takes. And Anvil just sets the og:image metadata to your app logo by default.

But you will need to make your need clear. It could be either -

  1. You want different images for different pages. In this case, I had made a feature request for it - Support for Image in routing meta

  2. You want your WhatsApp preview to show something other than just your app logo (favicon). In this case, it is not a routing issue.