Share app with users friend's and contacts

[ThomMaltix (Thom Bennett)]

Hi, I am new to fliplet and not a developer. I have written HTML, CSS and edited JS but that is about it. I want to add a share button/link to my menus on the app, see the screenshots below so ussers can share it via sms, what’s app, email, a copy link function.

I have read the support article and got as far as adding fliplet-communicate to the list but that is about as far as I got. I looked down through the JS panel and couldn’t locate the code so I assume adding it to the list doesn’t add the code to the apps script. I am wondering if couldn’t be an added feature the add component/feature section in the Studio as I can’t be the only one who would like this function. Until it is I would like help in setting this up then I can set it up on the other apps I am going to be putting together. I look forward to any advice/help in this matter.

There are two places I would like to add this function but can only upload one screenshot. The second location is on the home screen where I have a list of links.

Thanks in advance,
Thom

[Deb (Deb Ghosh)]

Hi Thom,

If you would like to attach a sharing option for a menu option you will need to add the following JS snippet to the Global JS.

$(document).on('click', '.linked.focus-outline', function() {
  if (
    $(this)
      .text()
      .trim() === 'Share app' //Change to match the name of the menu
  ) {
    Fliplet.Communicate.shareURL({
      url: Fliplet.App.getPublicSlug(),
      shares: [
        'email',
        'twitter',
        'facebook',
        'linkedin',
        'pinterest',
        'stumbleupon',
        'pocket',
        'whatsapp',
        'viber',
        'messenger',
        'vkontakte',
        'telegram',
        'line'
      ]
    });
  }
});

The global JS can be found here under Developer Options > Global > JS. See below:

Also please ensure you have the fliplet-communicate to the global list of resources:

If you want to add this to a another menu on your Home page then the click event will be different but the code will be the same. You can find the class to target using the Chrome inspector. If you are not sure please share of a screenshot of the menu and we will be able to help you with adjusting the snippet as necessary.

Thanks,
Deb

[ThomMaltix (Thom Bennett)]

Great, thanks, Deb. Awesome, mate. I’ll give that a go.

Best, Thom

[ThomMaltix (Thom Bennett)]

Hi Deb,

One more question. I am putting the share app button on the menu below. Do I need to add the fliplet-communicate script on every screen that the menu appears on. I thought it was a global menu though I notice that the library is only on the “this screen” tab. I have tried putting the fliplet-communicate script on other screens and it works, so to answer my own question I guess it does have to go on every screen.

Thanks, Thom

[Deb (Deb Ghosh)]

Hi Thom,

You do not need to put it on every screen. You can add fliplet-communicate to the global list of resources here and it will be available on every screen.

Under developer options, choose Global > Add > Libraries, if you add fliplet-communciate you do not need to add it to every screen.

Thanks,
Deb

[ThomMaltix (Thom Bennett)]

Ah, I see. Being ASD I see things fairly black and white. As I didn’t see it in the same place as the “this page” section I guessed it wasn’t there though I couldn’t understand why.

Thanks for the help, Deb.