Share Popup

Use this to prompt users to share a link, copy a code, or invite a friend.

Overview

This popup allows you to share the app with a friend via email, Twitter, or Facebook. It also contains UI elements to copy a code to a clipboard (e.g., promo code, referral code), and a short form.

Structure

The popup includes the following:

• Copy to clipboard input and button

  • There is an HTML element that copies the input's text to the user's clipboard using a javascript action.

• Share by Email button

  • Recipient email input

  • Body message multiline input

  • From input

  • Clicking Button Share will trigger a send_email API workflow

    • To use API workflows in your app, you need to be subscribed to at least a Personal Plan (Bubble editor > Settings > App plan)

    • You need to have set up your SendGrid email account (please read the quickstart guide here)
• Share to Twitter link

• Share to Facebook link

• Share to LinkedIn link

• Send email form elements

  • There is a collapsible group (Group Collapsible email details shown in the screenshot below) which contains three input elements. This small form can be made visible if you prefer to have the user stay in the app in order to share something, instead of having the user click the Share by Email button and type their share message in an external email service.

How to set up

• Edit the copy to clipboard input text's default value to be the unique code that the user will copy

• Update the recipient email input, body message multiline input, and from input

• Edit the send_email API workflow if needed

• Add a workflow on the page to show Popup sharePopup

• Set the collapsible invite by email group to be visible and update the workflows to send an email.