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 you want to create a campaign for. 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).

Embedding to Roccai

Step 3

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.

Step 4

Create a div and add the id=”roccai-container”

Roccai embedding

OBS: If you are using WordPress, then add the id roccai-container to the CSS ID field in the code block settings.

Roccai embedding

Step 5

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

Step 6

You will see the embedded swipe module in the preview. It will not be visible in edit mode.

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

How to embed your swipe module to websites

How to create a campaign

This is s guide to help you create a campaign for your swipe modules. This means that you can collect data from different channels, such as your website, newsletters, Social Media, etc.

Step 1

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

Roccai share

Step 2

To create a campaign, press this button.

Roccai Campaigns

Step 3

Now you can add the pieces of information needed to set up the campaign and press Create Link.

Step 4

Copy the link or the embedding code and add it to the channel. See how to embed a swipe module on your website here.

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

Getting started

Getting started

This guide will help you start with Roccai using a product feed 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)
  • description
  • imageUrl (required)
  • link (required)
  • tags (required)
  • categories
  • price

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

Step 2

Send the product feed to ju@roccai.com, and we will add the product feed to the Roccai platform.

Step 3

Once the product feed is uploaded to the platform, you will see the results from the product feed under Results.

Results Roccai

Step 4

You can see the autogenerated swipe cards under Swipe Journey.

Roccai Swipe Journey

It is possible to customize the swipe cards by clicking the edit icon on each swipe card.

Roccai edit swipe cards

Step 5

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

Start and final card

Step 6

It is possible to share the swiper journey either as a link or embedded code.

Share Roccai swipe module

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