1. Help Center
  2. Interaction Builder
  3. Different types of interactions

Create product card interaction

Product cards can be used on your website and within the giosg tools to increase visitor engagement. This article tells you how to successfully create and launch Product cards.

Product Cards are interactions, that can be used in different ways.

Screenshot 2023-07-06 at 10.02.09

There are four unique ways to utilize the Product cards, which serve as an effective tool for boosting sales through a simple Click-to-Action (CTA) approach.

1. Static product card interaction

2. Product card as a chat attachment

3.  Live campaign product card

4. Live stream campaign product card

  1. Static product card interaction

    Product cards can be used independently on your website, for example as pop-ups for upselling and cross-selling.  You can of course also add Product card elements in existing interactions, for example in the last stage of a Product recommendation to make it easier for the visitor to add recommended products to their cart. 
    To display these kinds of static product cards, follow these steps:

    1. Go to Interaction Builder and add a new product card element to your interaction from the element picker. 

    2. In the Appearance- tab on the right side of the page,  from the "Show products from" dropdown menu, choose the "Products in product card" option.

    3. Next, you can decide on the presentation of your product card. In the "List style" you can choose between a continuous or a carousel presentation.

    4. Further down the side bar, insert  the URLs of the products you wish to show in your product card interaction.

    5. After finalizing your product card, publish it as a "Website interaction".



    This allows you to display the product card anywhere on your webpage, providing visitors with the option to add a product to their shopping cart with just one click.
  2. Product card as a chat attachment

    To  allow your agents to share product cards directly in chat conversations, follow these steps:

    1. Create a new interaction and add to it a new product card element from the list of elements on the left side of the page. 

    2. Go straight to publishing, you don’t have to define anything else for these kinds of Product cards. When publishing the Product Card, choose the "Product Card Attachment" option. This categorizes it as a chat attachment, meaning it becomes available for your agents to use in the chat.
  3. Live campaign product card

    If you are planning a campaign (such as offers, Christmas, or Black Friday) and want to display products during their respective durations, you can follow these steps:

    1. Begin by creating a new interaction and add a product card element to it from the element picker on the left side of the page. 

    2. In the Appearance-tab on the right side of the page,  from the "Show products from" dropdown menu, choose the "Live Stream Campaign" option.

    3. In the "Select campaign group" dropdown menu, choose the group you created for your live stream campaign.

    4. Next, you can decide on the presentation of your product card. In the "List style" you can choose between a continuous or a carousel presentation.

    5. Further down the side bar, insert  the URLs of the products you wish to show in your product card interaction. These products will be suggested during the new live stream campaign creation.

    6. Publish the product card interaction as a "Website interaction", making sure it is accessible to your live stream viewers.

  4. Live stream campaign product card

    If you are planning to host a live stream and wish to display products during the stream, you will need to:
    1. Create a group that you intend to use for your live stream
    2. Have "Product card as a chat attachment" active (2nd interaction)
    3. Have "Live stream campaign" active (3rd interaction)