Getting started

Getting started

This guide is designed to assist you in getting started with Roccai by using a product feed sourced from your website.

Step 1

The first thing you need to do is create a product feed in your website’s backend. A product feed is a structured file containing detailed information about a company’s products; you might know this from Google Shopping.

The format must be either .xml or JSON.

This is an example of what one item in a Google Shopping feed could look like.

Product feed xml example

The product feed must contain the following elements

  • id (required)
  • title (required)
  • subtitle
  • description (required)
  • imageUrl (required)
  • link (required)
  • tags
  • categories
  • price
  • sales price
  • status (in stock etc.)

The product feed should be a live link and updated in real time.

Shopify

If you use Shopify you can use this plugin (up to 100 products for free):
https://apps.shopify.com/product-feeds-generator-by-amasty?locale=da

Step 2

Sign in to app.roccai.com, and the onboarding will begin. Start by selecting a category and press NEXT.

Step 3

Now, it is time to select a name for your Swipe Journey. Then please choose a language (should be the same as in the product feed) and press CREATE MODULE.

Step 4

You then select Via Link and add your product feed. Press DETECT DATA. If you want to build the swipe journey manually, that is also possible.

Step 5

You can now check if you are satisfied with how your products are detected. You can see a preview to the right. Press NEXT.

Step 6

Decide if you want all your products from the feed to be imported or only specific products. Press START IMPORTING

Step 7

Now, it is time to establish your style. Add your company colors and logo.

Step 8

This step is about the design of the swipe cards. To make it as fast as possible, please choose a template style for all your cards. You can use product images, where we pick images from your product feed, or upload background images. Press CREATE TEMPLATE.

Step 9

It is possible to make some design adjustments to the templates. It could be a frosted glass box, if the image should cover the screen etc.

Step 10

You can add more templates. This is mostly used if you don’t use product images but background images or colors.

Step 11

Add your first question if you want, or press SKIP FOR NOW.

Step 12

Success! Now, you can try your swipe journey, share it, or customize your swipe cards.

Step 13

Adding a start, info, and a final card to the swipe journey is possible.

Start and final card

Step 14

Sharing the swiper journey as a link or embedded code is possible. Learn more about how to create campaigns here.

Share Roccai swipe module

If you need our help, please contact us via the chat in the bottom right corner.

Which swipe structure should I choose?

Which swipe structure should I choose?

One of the important decisions you’ll need to make is whether you want to create a Swipe Module with a linear structure or a tree structure. Each option has its own advantages and considerations. To help you make an informed choice, we have created this guide that explains the differences and provides guidance on selecting the right option for your needs.

Tree Structure

With our tree structure, we can automatically design a swipe journey based on your product feed. This solution is preferable if you have many products and want our algorithms to help you create a relatively short but varied swipe journey that leads to a manageable number of products.
We can auto-generate swipe cards with relevant questions and images if you choose this option. This means you can have a swipe journey ready immediately. You can customize the swipe journey to make it the way you want.

To learn more, please check out our brief guide on Getting Started.

Linear Structure

Our linear solution offers swipe journeys where you always swipe the same sequence of swipe cards. This is useful if you want all cards displayed every time, use Roccai as a visual survey, or have very few products or services to offer.
Our linear structure provides a straightforward way to create swipe modules by allowing you to add products manually or via a product feed. Swipe cards are always created manually within the linear structure, and you can decide the order of the cards via our drag-drop function. With this solution, you have full control over the content and sequence of the swipes.

To learn more, please check out our guide on How to Create a Linear Swipe Journey.

If you need our help, don’t hesitate to get in touch with us via the chat bottom right corner.

How to Create a Linear Swipe Journey

How to Create a Linear Swipe Journey

Our swipe solution offers two different structures. In this guide, we will show how to create a linear swipe journey where you swipe the same sequence of swipe cards every time. This is useful if you want all cards displayed every time, use Roccai as a visual survey, or have very few results (products) to offer.
This guide shows you step-by-step how to create a linear swipe journey.

Step 1

Sign in to app.roccai.com, and the onboarding will begin. Start by selecting a category and press NEXT.

Step 2

Now, it is time to select the structure of your Swipe Journey. In this case, you want to choose the Linear structure since you are creating a manual swipe journey. Press CREATE SWIPE MODULE.

Step 3

You can add your data via a link or add your products or services manually.

Step 4

If you have chosen to build it manually, you first need to add your products. Products represent the individual items, products, or services users are presented with once they complete their swipe journey.

You can manually add the relevant information for each product, such as image (copy image address or upload), title, price, description, and a link to the product.

Note that it is very important that you remember to add tags to your result. We recommend adding +3 tags to get the best swipe journey possible. Press ADD PRODUCT.

Step 5

Once you have added the results, it’s time to create swipe cards. Swipe cards can contain images, questions, or words that the end user swipes yes or no to. You can customize the layout, design, and appearance of the swipe cards to align with your branding and user preferences.

Again, remember to add a tag from the list so that the map leads to one or more results.

Step 6

Once you have added your swipe cards, you can change the order of the swipe cards via drag’n’drop. To do so, you need to switch the toggle to drag’n’drop in the top right corner. Remember to save your journey.

Step 7

It is possible to insert a start, info, and a final card in the swipe journey.

Start and final card

Learn more about creating campaigns and embed your swipe module in our guides.

How to embed your swipe module to websites

How to embed your swipe module to websites

This guide will show you how to embed a swipe module on your website.

Step 1

Log in to Roccai and choose the module for which you want to create a campaign. Press the Share icon

Roccai share

Step 2

Click the code icon next to the campaign you want to embed.

Roccai embedding

It can look like this (the link in the script contains your specific swipe module information).

Step 3a – If you use WordPress

Log in to your website backend and find the page where you want to embed the swipe module. Add a code block and add the script here.

Then add the id roccai-container to the CSS ID field in the code block settings.

Roccai embedding

You can now style the size of the swipe module container. We recommend the following:

This image has an empty alt attribute; its file name is Screenshot-2023-06-29-at-11.06.57-1024x903.png
OBS: The embedded swipe module will be visible in the preview; it will not be visible in edit mode.

Step 3b – If you use Simplero

Log in to your website backend and find the page where you want to embed the swipe module. When adding a script on a Site or Landing Page, you’ll be able to add a Script section.

Copy the script

and add it inside the script section:

Copy the container ID:

Click the HTML button located in the upper right corner of the toolbar, the last button the looks like “< >

The Source code screen will open. Paste the embedded code where you want it and click the blue Ok button when done:

    Step 3c – If you add to code

    Copy the script and add it inside the <head>

    Copy the container ID and add it inside the <body> where you want the swipe module to be displayed.

    If you need our help, don’t hesitate to get in touch with us via the chat in the bottom right corner.