How to I add a link that punches out to a website?

Question

I know that typically we want to keep the interaction fully within the Bixby experience, but if I want to show very detailed non-assistant style information, it may be advantageous to offer a link that allows the user to see more at a given URL. I have seen this UX practice in capsules that come with Bixby on the Note9, such as Yelp (Bixby shows highlights of reviews, but to get the full list of all reviews, you can see more on Yelp), The Weather Channel, etc.

My question is what is the recommended way to put a "See more on SITE" link into a layout?

score 4 · Answer 1 · answered Mar 18 '19 at 18:35

The current recommended method would use the app-launch key available within result-view.

You would need to create the following:

A primitive (text) concept named Url
An Action named FetchUrl whose output is the url you would like to launch
A separate result-view where the app-launch key is defined. This is where your desired url will be launched from.

Your flow would be:

Your capsule provides a result-view that displays a "See more on SITE" card (this can be any display element that contains an on-click).
The "See more on SITE" card's on-click would contain an intent whose goal is your FetchUrl Action and whose value(s) is/are the relevant input(s) you need to return the url to be launched.
Once the "See more on SITE" card is clicked by the user, the intent results in a Url output.
Due to the match pattern, this triggers the result-view containing the app-launch key (example shown below). Since this result-view only contains the app-launch, nothing would be displayed and your desired Url will be launched on the user's default browser.

How to define app-launch within the result-view:

result-view {
  match: Url (this) {
    min(Required) max (One)
  }

  render {
    nothing
  }

  app-launch {
    payload-uri {
      template ("#{value(this)}")
    }
  }
}

score 0 · Answer 2 · answered Jul 03 '19 at 04:09

Another alternative is to use a compound-card chin. This works of course only if a compound card is the appropriate UI component for your layout. This is discussed and answered here but for convenience, here is sample view code below:

  render {
    layout {
      section {
        content {
          compound-card {
            content {
              single-line {
                text {
                  value {
                    template ("Click below to Punch Out")
                  }
                }
              }
            }
            chin {
              slot1 {
                single-line {
                  text {
                    value {
                      template ("Link to Google")
                    }
                  }
                }
              }
              url {
                template ("http://www.google.com")
              }
            }
          }
        }
      }
    }
  }

How to I add a link that punches out to a website?

2 Answers2