Question 1

Mapping your Sheet data to website elements

Accepted Answer

What is a card and how to manage it?

Q: How to use Webhooks for automation

<h2 id="webhooks"># Webhooks</h2> <p>SpreadSimple has a new feature - <strong>Webhooks</strong>, that can be found in <code>Checkout Tab</code>. </p> <h3 id="whatisawebhook">What is a webhook?</h3> <p>Put simply, as soon as something happens, the webhook immediately notifies other applications transferring the data about the event. Just like SMS that you get from your bank whenever there is some activity in your bank account. So basically webhooks provide automatic real-time communication between apps and it's all done quickly and almost effortlessly. </p> <p><img src="https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/ss-webhooks_bspbg1.gif" alt="" /></p> <h3 id="whatdoineedwebhooksfor">What do I need webhooks for?</h3> <p>Using webhooks can be a great way to automate your business processes like order collection that results in saving lots of time and effort. All you need to do is integrate them with other tools you want to use. </p> <h3 id="howdoisetthewebhooksup">How do I set the webhooks up?</h3> <p>To use webhooks you will need an intermediate automation service like Integromat, Zapier, etc. There you need to add the tool you want to connect with your SpreadSimple website and then create your custom webhook URL. This URL should be pasted into Webhooks URL Field in your <code>Checkout Tab</code> on SpreadSimple. </p> <p><img src="https://storage.crisp.chat/users/helpdesk/website/918f9541750fe800/manage-or-spreadsimple-2020-08_1x99uol.png" alt="Setting up the Webhook URL" /></p> <p>After all the changes have been saved, make sure to have a test run to see that your service catches the webhook which means the connection is working. For that you just need to</p>

What is a card?

Basically, a card is a core element of your content. Each card represents one item of your listing whatever website template you are using.

A card consists of the following elements:

Title
Subtitle
Price
Text (supports Markdown and HTML tags)
Image (or Images)
Specification
Call-to-Action Button (or Action Button)
${color}[#4f4f4f](SKU (not displayed on the site, but used for notifications and automation needs))

These are basic but you don't have to use all of them - just pick the ones you find necessary. That could be easily done on your Content Tab on the left.

If you don't need a certain piece of information to be shown just leave the corresponding field on your Content Tab empty. That will be applied to all the cards.

You may arrange information on your card the way you prefer to. Just choose a necessary column for the element you want it to be. E.g., ${color}#0433ff column information can be mapped to Subtitle, Text or Specification fields.

![](https://storage.crisp.chat

Question 2

Adding images

Accepted Answer

# How to configure images

First, ensure you have an image column (or multiple columns) on your Google Sheet, and proper column mapping in the SpreadSimple.

You can have one or multiple image columns You can configure image column mapping on the Content tab

To display images on your website, SpreadSimple needs a link to an image file hosted online. E.g: https://images.unsplash.com/photo-1536500152107-01ab1422f932 or https://i.imgur.com/0JSkR76.jpg

The links to images should be put as text to the corresponding cells under the image column in your Google Sheet.

Where do I get image links?

You should either upload images to a hosting service or use a link to an existing image.

Let's review several services that help to upload and host images.

| Disclaimer: you choose to store your images on these or other image services at your own risk.

||| Please, respect the terms of use of third-party services you use for image hosting.

Imgur

Imgur is the most popular image hosting service on the web.

Go to https://imgur.com/upload and upload your image
Right-click on the uploaded image and click "Copy Image Address"

Postimage

Visit https://postimages.org and click Choose images to upload your image
Copy Direct link URL

Cloudinary

Go to https://cloud

Question 3

Add-ons Tab

Accepted Answer

Add-ons

This tab contains the list of integrations available on SpreadSimple.

There are various categories of tools and services for you to browse through. Also there is a Search bar on the top of the page.

Each integration card has a badge:

Built-in means that it doesn't need any configuration (in most cases) and there's an instruction on how to use it inside the card.

Follow the instruction to use this built-in integration

Not connected means that you haven't enabled this service/tool. Once you enable it, the badge will change to Connected.

Follow the instructions inside the card to connect the service or the tool

Some integrations are available both on Free and Pro Plans, and some of them are Pro only.

Question 4

Embedding SpreadSimple as a widget into other platforms

Accepted Answer

Embedding as a widget

Embed your catalog or directory built with SpreadSimple as a widget onto another website by following these simple steps:

Configure your widget settings

|| The instructions below apply to the new widget format. The old widget format will remain working, but we recommend updating the widget code on your host website.

Go to the Settings Tab -> Widget settings and open the Widget builder

Select the routing option (if necessary):

By default, all the widgets use routing. In this mode, during the navigation on the widget, a path is added to the website page URL. For example:

Website URL: domain.com Website URL with the widget embedded: domain.com/# A details page on the website: domain.com/#/item/item-one

Usually, this type of routing works best because it allows avoiding conflicts with other pages of the host website.

But sometimes the hash in the URL (#) can conflict with anchor links on the website. For cases like that, there’s the no routing option that you can select on the menu. In no-route (or route-less) mode, the widget navigation won’t change the URL of the host website. This means the details pages won’t have URLs like domain.com/item/item-one.

Set the widget path (if ne

Question 5

How to use Webhooks for automation

Accepted Answer

# Webhooks

SpreadSimple has a new feature - Webhooks, that can be found in Checkout Tab.

What is a webhook?

Put simply, as soon as something happens, the webhook immediately notifies other applications transferring the data about the event. Just like SMS that you get from your bank whenever there is some activity in your bank account. So basically webhooks provide automatic real-time communication between apps and it's all done quickly and almost effortlessly.

What do I need webhooks for?

Using webhooks can be a great way to automate your business processes like order collection that results in saving lots of time and effort. All you need to do is integrate them with other tools you want to use.

How do I set the webhooks up?

To use webhooks you will need an intermediate automation service like Integromat, Zapier, etc. There you need to add the tool you want to connect with your SpreadSimple website and then create your custom webhook URL. This URL should be pasted into Webhooks URL Field in your Checkout Tab on SpreadSimple.

Setting up the Webhook URL

After all the changes have been saved, make sure to have a test run to see that your service catches the webhook which means the connection is working. For that you just need to

Question 6

PayPal Checkout

Accepted Answer

Step 1. Enable Order Form (Cart)

PayPal Checkout is a part of the shopping cart experience, so first of all, make sure you enabled the 'Order Form' for the action button element.

Enable the order form and cart in your Content Tab -> Button settings

|| Please note that the Price column needs to be formatted as Currency in your Google Sheet!

Step 2. Turn on the PayPal Checkout support

Go to Checkout Tab, then open Shipping, Fees & Payments menu and click on Enable new add-on:

Then select PayPal from the list of available payment methods:

And switch on the Enable toggler:

Step 3. Get PayPal Client IDs

|| To go live (Production) you need to create a PayPal business account. You can still use Sandbox in your personal PayPal account to test it out.

Log into the Developer Dashboard with your PayPal account credentials. If you don't have an account, you can click on the sign up option.
On My Apps & Credentials, use the toggle to switch between sandbox and live (production) testing apps. 3

Frequently Read Articles

Browse All Categories