When sharing Firebase dynamic links on WhatsApp, the image does not appear and it redirects users to the App Store or Play Store

Currently, I am facing a requirement where I need to share a product link on social media with the title, description, and image included.

I initially tried using Firebase dynamic links for deep-linking which worked perfectly, but I encountered an issue when sharing the link on WhatsApp as the image was not appearing. Since it is crucial for this functionality to work seamlessly on WhatsApp, I am open to any suggestions or alternatives related to Firebase dynamic links that could resolve this issue.

In addition, I also experimented with Open Graph (og) tags and Twitter cards for Twitter integration, attempting to redirect users to the app using JavaScript. Below is the snippet of JavaScript code used:


var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 600) return;
RedirectToMarket();
}, 500);
var deepUrl = getParameterByName('deepUrl');
var url = encodeURI(deepUrl);
if (url) {
window.location = url;
}

While the script successfully redirects users to the app if it's already installed, it fails to redirect users to the Play Store or App Store in case the app is not installed on their mobile device.

If anyone has an alternative solution to address this challenge, I would appreciate any insights or recommendations.

javascriptfirebasedeep-linkingwhatsappfirebase-dynamic-links

Answer №1

The issue arose from the image requirements set by WhatsApp. To successfully upload an image, it must be in either JPG or PNG format and have a file size of under 300KB with dimensions no smaller than 300 x 200 pixels.

Answer №2

To see a preview image, refer to the FIRDynamicLinkSocialMetaTagParameters in the sample iOS code provided at https://firebase.google.com/docs/dynamic-links/ios/create. By utilizing this class, you can customize the link text, description, and image that will be displayed in the preview. This information will be visible when the link is shared on iMessage and Facebook, and it should also work with WhatsApp.

Regarding JavaScript redirects: I advise against using JS or server redirects when handling dynamic links. Apple's guidelines require user interaction to trigger the App through Universal Links. Utilizing JS redirects will prevent Universal Links from working properly. What are you hoping to accomplish by employing JS redirects?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to align an image in the center of a circular flex container

I'm facing an issue in my Angular project where I have the following code snippet: onChange(event: any) { var reader = new FileReader(); reader.onload = (event: any) => { this.url = event.target.result; }; reader.readAsData ...

javascripthtmlcssangulartypescript

Using JQuery AJAX to fetch an Array of Objects

My current challenge involves using json_encode in order to allow my jquery ajax function to fetch data from a php script. However, the array I am attempting to encode and retrieve consists of objects $la_uselessinfo = array(); $lv_cnt = 0; $uselessinfo ...

javascriptphpjqueryarraysajax

Error: Cannot iterate over Redux props map as it is not a function

I've encountered an issue while trying to render out a Redux state by mapping through an array of objects. Despite receiving the props successfully, I keep getting an error stating that 'map is not a function'. It seems like the mapping func ...

javascriptreactjsredux

Configuration object for Webpack is not valid

I encountered an error while using webpack that says: Invalid configuration object. Webpack has been initialized with a configuration object that does not conform to the API schema. - configuration.resolve has an unknown property 'extension&ap ...

javascriptnode.jsreactjswebpackwebpack-4

"MongoDB's .find function functions properly in the shell environment, but encounters issues when

As a newcomer to Node Express Mongo, I decided to venture into creating my own website after following tutorials. The page I'm working on is a login page. While other people's code has worked for me, my attempt didn't go as planned. Even con ...

javascriptnode.jsmongodbexpress

Selenium and AngularJS patiently wait before carrying out specific actions

I have been using selenium to test an AngularJS application and I am encountering an issue where I am unable to perform any actions on the page until it is fully loaded. Although I have considered using Thread.sleep(), I am aware that this is not the most ...

javascriptjavaangularjsseleniumselenium-webdriver

"Implementing debouncing functionality with Lodash in an asynchronous context

I've encountered an issue while trying to implement debounce in my application before making an api call. It seems like the await function is being ignored and the function is called without all the necessary values. export default class App extends ...

javascriptreactjslodashdebouncing

Tips on setting a singular optional parameter value while invoking a function

Here is a sample function definition: function myFunc( id: string, optionalParamOne?: number, optionalParamTwo?: string ) { console.log(optionalParamTwo); } If I want to call this function and only provide the id and optionalParamTwo, without need ...

javascripttypescript

How do we handle the reception of document.form.submit() in the code behind?

I have a JavaScript function document.form1.submit() and I am wondering how to receive it in the code behind. In which class and method should I be looking? I need to get the value from a textbox and store it in session, but I'm not sure if I need an ...

javascriptasp.netvb.netsubmitsession-state

Event listener is failing to execute the functions

Even though the inline onmouseover="verdadero()" function is properly set up Upon further inspection, it appears that while the event listener is added to the box element, the function is not being triggered when hovering over it, and console.lo ...

javascripthtmlcss

Enhancing Watermark Functionality for Text Boxes

I am encountering an issue with three textboxes all having watermarks. When I use JavaScript to set the value of the second textbox in the OnChange event of the first textbox, the text appears as a watermark. However, when I click on the textbox, it become ...

javascriptasp.netajax

Is it possible to create a Three.js animation with a see-through background?

I have an HTML5 video with a greenscreen effect that I want to display on a plane using a video texture in Three.js. I attempted to use separate video textures for the main video and the alpha channel, but encountered synchronization issues. From what I u ...

javascripthtmlthree.js

Revise the content within the table cell

Running the following code using server push: $('tr[name=' + device + ']').find("td[id='status']").text('STARTED'); When attempting to access the element's id, it returns the correct value. $('tr[name=& ...

javascriptjqueryhtml

Trouble arises when implementing personalized buttons on the Slick JS slider

Are you struggling to customize buttons for your Slick Slider JS? I am facing a similar issue with applying my own button styles to the slider. I am interested in using arrow icons instead of the default buttons. Here is the HTML code snippet: <secti ...

javascriptjqueryhtmlcss

Ways to transform a PHP function into one that can be invoked using Ajax

In my current project, I’m facing an issue where I need to call multiple PHP functions that output HTML using Ajax. Instead of directly trying to call a PHP function with Javascript, I believe application routing can help the frontend hit the correct fun ...

javascriptphpajax

Issue with React Audio Recorder causing useState hook to return null for recorded audio

I'm currently working on a registration form using React that allows users to enter their username and record audio with the react-audio-voice-recorder library. I've implemented the useState hook to handle the state of the recorded audio blob, bu ...

javascriptreactjsnpmaudioreact-hooks

The ion-input border seems to be fluctuating as the keyboard appears on the screen

I'm currently working with Ionic 3 and experiencing an issue where the selected ion-input's border in the ion-content is shifting when the device keyboard appears on the screen. Here is a visual representation of the problem: https://i.stack.imgu ...

javascriptcssionic-frameworksassionic3

Sharing specific props with deeply nested components in React

I am experimenting with configuring props for children components. In this example, I am testing a function to target any child, whether nested or not, with the prop swipeMe. It works perfectly when the render function contains only a single child, like ...

javascriptreactjs

What causes the page loading issue in Firefox when a cache manifest is used?

I recently created an HTML5 game that I wanted to make playable offline. To achieve this, I added a manifest file to the game directory. The game is located in a subdirectory at /games/game/, and the manifest file resides within that same directory at /ga ...

javascriptfirefoxcachinghtml

Optimal Timing for Loading Initial State from Database Using Vuex

In my Vue/Vuex project, I have a simple setup where I retrieve a list of categories from my database using an HTTP GET request. Before implementing Vuex, I used to fetch this data directly in my main component when it was created. Now with Vuex, I have g ...

javascripthttpvue.jsvuex