# 1. Mapping configuration

Learn how to create your first Skin CMS Mapping

## **What will you need before you start**

* An account and a base in [Airtable](https://airtable.com/)
* Airtable personal access tokens for the base you want to connect
  * you must have `Owner` or `Creator` role for the given base in Airtable
* 3DVista virtual tour

### Skin CMS Mapper

Once you purchase a Skin CMS plan on [360creators.com](https://360creators.com), you will gain an access to the **Skin CMS Mapper**. Skin CMS Mapper is a simple tool you will be using to create and manage your mappings.

<figure><img src="/files/oD3Tx72C5MbTxBXruuLa" alt=""><figcaption><p>Screenshot of the Skin CMS Mapper - Creating a new mapping</p></figcaption></figure>

### **What is a mapping?**

Mapping is essentially the connection between the Airtable table and your 3DVista virtual tour.

<figure><img src="/files/QdafSlbBQrn8aAqUHnxr" alt=""><figcaption><p>Airtable table &#x3C;-> Skin CMS &#x3C;-> 3DVista virtual tour relation</p></figcaption></figure>

Mapping contains the information of which Airtable field (column) is mapped to which 3DVista component (skin element).

## Mapping configuration

When you create a new mapping, first you need to set up the configuration:

<figure><img src="/files/tmaQqVOJS2p2Jy3SpBrb" alt=""><figcaption></figcaption></figure>

### <mark style="color:red;">1. Mapping name</mark>

Name of the Mapping. We recommend using something related to the project you are working on.

### <mark style="color:red;">2.</mark> <mark style="color:red;"></mark><mark style="color:red;">**Airtable personal tokens**</mark>

You can create Airtable personal tokens on Airtable's [Personal access token management](https://airtable.com/create/tokens) page. In order to create a mapping you need to create two personal access tokens - one for Mapper and one for 3DVista.

#### <mark style="color:red;">**2.1.**</mark> <mark style="color:red;"></mark><mark style="color:red;">Airtable personal access token for mapper</mark>

This personal token will be used by the Skin CMS Mapper to read your Airtable table's schema (structure) in order to access the names of the fields (columns), their types and configurations which are necessary for creating the mappings.

Create a personal access token with the following scope:

`schema.bases:read`

<figure><img src="/files/YlqBIe6Wefuor2XHjy2m" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**2.2.**</mark> <mark style="color:red;"></mark><mark style="color:red;">Airtable personal access token for 3DVista</mark>

This personal token will be used in the virtual tour to fetch the data from the Airtable table. Therefore, as it's publicly available, it is extremely important to select the **correct** scope which in this case is:

`data.records:read`

<figure><img src="/files/yAlMWh9mCNaqOMZgQb5W" alt=""><figcaption></figcaption></figure>

With the `data.records:read` scope the virtual tour visitors will be able to read the data from **all** tables within the base for which the personal token is created (on the example above the base is: Skin CMS - Matej demos). This might include giving away an access to other tables that are not being used in the virtual tour but are part of the base. That's why we recommend making sure that the base does not contain any sensitive information. Users won't be able to edit nor delete the data, only read it.

### <mark style="color:red;">3. Airtable base ID</mark>

An Airtable link to your table looks something like this:

```
https://airtable.com/apphSS5HBXphqjWYw/tblQIsThQ5s5Vm3Zm/viw3lOMNmqyT2HCPZ
```

We are only interested in the **first** part after the `https://airtable.com/` which in the example above is `apphSS5HBXphqjWYw` - that's the base ID.

{% embed url="<https://support.airtable.com/docs/finding-airtable-ids>" %}
Airtable's documentation regarding the link structure
{% endembed %}

### <mark style="color:red;">4. Airtable table name</mark>

The Airtable table name in the example is `Table 1`:&#x20;

<figure><img src="/files/Gk5xQw12oKhb1DsID5U7" alt=""><figcaption></figcaption></figure>

## Save and connect Airtable

Once you are done, you can hit the `Save and connect Airtable` button and continue to the 2nd step.

Whenever you change your Airtable structure, you will need to `Save and connect Airtable` to see the updated fields in the `Field Mappings` section.


# 2. Field Mappings

Connect Airtable fields with 3DVista skin components

After you successfully connected your Airtable table, now you can map individual table fields (columns) to your 3DVista virtual tours' skin components:

<figure><img src="/files/28GCzp9JjUF4AG2Z51jB" alt=""><figcaption></figcaption></figure>

You can always add, change or remove mappings later without changing anything in 3DVista after the 3DVista setup is completed.

Some things to be mindful of:

* In 3DVista: the names of the skin elements (components) **must** **be unique.**
  * Duplicating an item with the same name creates challenges to keep things organized. Skin elements can only have the same name if there is one in the Desktop skin and one in the Mobile skin.
* Names of the 3DVista skin elements can be different from Airtable field names although we recommend using the same names.

You can find instructions on how to map individual fields (eg. Airtable's formula to 3DVista's Title) in section [Field mappings](/skin-cms/skin-cms-mappings/field-mappings).


# 3. 3DVista Setup

After you are done with your field mappings, it's time to integrate the mappings into your 3DVista virtual tour. The only thing you need to do (and just once) is to copy the 3DVista code from the Mapper into the 3DVista project:

<figure><img src="/files/oAUhwPjLagdUyqMFeErk" alt=""><figcaption></figcaption></figure>

1. \[Mapper] Copy the code from the Skin CMS Mapper in `3DVista Setup`
2. \[3DVista] In 3DVista: go to Skin, select Main Viewer from the elements in the right panel, click on Add action and select Execute Javascript
3. \[3DVista] Change "On Click" to "On Initialization"
4. \[3DVista] Paste the copied code and click Done

Repeat the steps above for the Mobile skin's Main Viewer if you have a Mobile skin.


# 4. Create Triggers

How to display Airtable record's data in popups

Triggers are meant to display the data of a certain Airtable record (row) in your 3DVista tour.

## In Airtable

First, create a formula field in Airtable. Call it anything you like, we recommend something like `3DVista Trigger`. Copy the formula below and paste it in the formula field and click Save.

```
CONCATENATE('window.BlazeCreators_skinCMS.openRecord("',RECORD_ID(),'");')
```

<figure><img src="/files/nmg76enZlqfaEv14xkB0" alt="" width="375"><figcaption><p>The field called "3DVista Trigger" in Airtable should look similar to this</p></figcaption></figure>

This field will automatically populate Javascript codes that will trigger opening individual records from Airtable in your 3DVista virtual tour:

<figure><img src="/files/PDjShqONNbENgKQaeyPD" alt=""><figcaption></figcaption></figure>

## In 3DVista

After copying one of the 3DVista triggers, open the 3DVista project, find something you would like to use as a trigger such as a hotspot in a panorama and:

1. Add an Execute Javascript action
2. Select an action that will be used as a trigger - it can be on click, on rollover, on rollout etc.
3. Paste the code and click Done

If the popup window needs to be shown/hidden, then don't forget to add the action of Show/Hide Components.

Repeat the above for all Airtable records you want to trigger and you are good to go! 😌


# Field mappings

Check which fields you can connect with which components

Individual mappings have different behaviors depending on the type of the 3DVista component to which you are trying to map the field's value and each field has a list of eligible components. If you try to map a field to a component that is not mentioned in its the list, the mapping will be ignored and will have no effect.

## Airtable > 3DVista

{% embed url="<https://airtable.com/embed/shrvylTfycxde6X4H?backgroundColor=yellow&layout=card>" %}

## 3DVista  > Airtable

{% embed url="<https://airtable.com/embed/shrjf50pOdaD2x6fS?backgroundColor=yellow&layout=card>" %}


# singleLineText

Compatible 3DVista components:

* `Label`
* `Button`

For both component types, `Label` and `Button`, the Airtable record's value will be mapped to component's contents (the `text` attribute)


# multilineText

Compatible 3DVista components:

* `Stylable and Multiline Text` - the Airtable record's value will be mapped to component's contents (the `html` attribute)

Options:

* Override HTML (checked/unchecked)

**Override HTML option checked**

3DVista's `Stylable and Multiline Text` component contains an HTML. If you have the option **Override HTML** checked,  component's whole HTML will be replaced with your Airtable contents. Therefore, this option is only suitable if you are planning to replace the whole HTML.

**Override HTML option unchecked (default)**

In this case, the value from Airtable is inserted into the 3DVista's HTML skeleton meaning that it will persist the styling you apply in 3DVista. You can either insert plain text or HTML. In order for the value to be inserted correctly, the default component's value in 3DVista must be set to `PLACEHOLDER`:

<figure><img src="/files/5mtLJmDCaNfWmbGfNGAz" alt=""><figcaption><p>Set the component's value to PLACEHOLDER otherwise the value will not be inserted if the Override HTML option is unchecked</p></figcaption></figure>

Limitations:

* Airtable's Rich text formatting is not supported. Reason: Airtable's rich text formatting uses a markup language called Markdown which is not supported by 3DVista and at the moment we do not provide a Markdown conversion to HTML.
* With the **Override HTML option unchecked (default)** you can only use one way of styling. That means you can't have a title and a paragraph with different styles. If you want to have multiple different styles in one `Stylable and Multiline Text` component, use the **Override HTML checked option**.


# multipleAttachments

Compatible 3DVista components:

* `Image` - the first attachment (image) will be mapped to component's URL meaning that the first image of the Airtable record will be displayed

Limitations:

* We only support mapping one image (Airtable attachment) to a 3DVista `Image` component
  * if you upload more than one image in your Airtable record, we will only use the first one and the rest will be ignored

<figure><img src="/files/igwNhKFumLF9vLeRZK6h" alt=""><figcaption><p>There is a field "picture" and 2 records having a "picture" on the image above. The first record has 3 pictures and the second record has 1 picture. The first behavior (having 3 pictures) is not supported and the 2nd and the 3rd image will be ignored. The second behavior is correct.</p></figcaption></figure>


# formula

Compatible 3DVista components:

* `Label, Button` - the Airtable record's value will be mapped to component's text
* `Stylable and Multiline Text` - the Airtable record's value will be mapped to component's contents (the `html` attribute)
* `WebFrame` - the Airtable record's value will be mapped to component's `url` attribute meaning the WebFrame will now point to the URL from the Airtable


# singleSelect

Compatible 3DVista components:

* `Label` - the Airtable record's value will be mapped to component's text


# button

Compatible 3DVista components:

* `Button`

Limitations:

* We only support the "Label" and the "Open URL" actions in the Airtable's button

Behavior:

The "Label" field of the Airtable record will be mapped to 3DVista button's text and the button will open a URL from the the "URL formula" field on click

<figure><img src="/files/tJDthHQi6ntYSuxQqY7L" alt=""><figcaption></figcaption></figure>


# url

Compatible 3DVista components:

* `Image`, `IconButton`, `Label, Button` - an "Open URL" action that opens the URL of the Airtable record will be attached to these components
* `WebFrame` - the WebFrame will point to the URL from the Airtable record


# email

Compatible 3DVista components:

* `Label` - the Airtable record's value will be mapped to component's text and the label will open `mailTo:EMAIL` URL on click
* `Image`, `IconButton` - `mailTo:EMAIL` will be opened on click


# number

Compatible 3DVista components:

* `Label` - the Airtable record's value will be mapped to component's text


# Mapping to multiple components

If you want to map a value from an Airtable field to multiple components, use a comma separator in the Mapper like shown on the image below:

<figure><img src="/files/7k2KLpKEkug36JEXSyFx" alt=""><figcaption><p>Simply type the names of the components you want to map the field's value to and separate them with comma.</p></figcaption></figure>

The example above will map values from the "picture" field to components in 3DVista called "Image" and "Thumbnail".

You can use this for all mapping. Just make sure the components you are mapping the value to are compatible with the Airtable field (you can check the compatibility tables in the [Field mappings section](/skin-cms/skin-cms-mappings/field-mappings)).


# Attributes

For Freelancer, Business and Enterprise plans

{% embed url="<https://airtable.com/shrya7QPWML9HRB2w>" fullWidth="true" %}


# Mapping attributes

`FREELANCER` and `BUSINESS` plans do support mapping attributes.

Mapping attributes is similar to mappings values. Let's consider a simple mapping of an Airtable field called "Product title" to a 3DVista component called "Title":

<figure><img src="/files/4f9w0oN5RaD9pq4gA3ZM" alt=""><figcaption></figcaption></figure>

This results in the Airtable record's value being mapped to the "Title" component:

<figure><img src="/files/43HIq33d2nRrf0Zkjbid" alt=""><figcaption></figcaption></figure>

Mapping attributes is very similar. Let's say we want to change the color of the Title and we want to use a value from Airtable. The color can be computed, for example depending on the product's status it can be green if the product is available or red if the product is sold out - we can use a formula field to achieve this:

<figure><img src="/files/sAbgOtmclbuZxf3dmDGh" alt=""><figcaption><p>Let's create a new field "Product title color" with a computed value depending on the value from the field "stock"</p></figcaption></figure>

<figure><img src="/files/ELVMbTmkgA1t46pKfjun" alt=""><figcaption><p>Let's map the new "Product title color" to the component "Title" but this time to an attribute "fontColor"</p></figcaption></figure>

Voilà, there we have the color of the "Title" component changed:

<figure><img src="/files/ixQaBx58CH2Rw3OBsHhm" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Jr4cCnV5XtTJL5YfVs2J" alt=""><figcaption></figcaption></figure>

With attributes you can change the component's style, position, alignment etc.

You can find a list of the supported attributes and instructions on how to use them in the [Supported attributes section](/skin-cms/skin-cms-mappings/attributes/supported-attributes).


# Supported attributes

You can find a list of supported attributes for each component in the compatibility table:

{% embed url="<https://airtable.com/appE2sbWGfhZtZngQ/tblaLqmwKJ8x5duj6/viwfVdiPawGOTmEfs?blocks=hide>" %}

## Usage

Apart from the exceptions below, just use a simple text value. For example:

* fontSize: #306230
* fontFamily: Courier New
* width: 100
* verticalAlign: middle

<figure><img src="/files/1j6voE1zn8ZoznhiaJCT" alt=""><figcaption></figcaption></figure>

### General rule of thumb

In general, attributes can have values that you can set them in 3DVista. So for example, the Label's horizontal alignment in 3DVista can be set to `left`, `center` or `right`:

<figure><img src="/files/jhABNq6wkptl9aqBpEPv" alt=""><figcaption></figcaption></figure>

These are essentially CSS properties, in this case it's the property:

`text-align` (<https://developer.mozilla.org/en-US/docs/Web/CSS/text-align>)

<figure><img src="/files/bS6alOw1Jh9PTiSNFUwu" alt=""><figcaption></figcaption></figure>

Please, use the appropriate CSS values when working with attributes.

## Special attribute usage

### **backgroundColor**

### **rollOverBackgroundColor**

### **pressedBackgroundColor**

* need to have the following format in Airtable: `["HEX_COLOR"]`
  * for example: `["#009a00"]`
* make sure that you set the component's background opacity to 1 (or however you want) in 3DVista otherwise the background could remain transparent (which is the default):

![](/files/Vh5GwZf304XIqqnAz4M5)

* if you want to achieve a gradient effect, you can add more colors like this:
  * `["#009a00", "#ff0000"]`

If you encounter any issues while mapping attributes, please do not hesitate to contact us and we will update the documentation.

### visible

* indicates whether the component is shown or hidden
* accepts 2 values:
  * `true` - component is shown (visible)
  * `false` - component is hidden (invisible)

**Usage tip:** You can use this attribute when your dataset has some inconsistencies, for example Product A does have a secondary picture but Product B doesn't. You can create a formula field `Product Secondary picture visibility` and use its computed value to show/hide the 3D Vista secondary picture component.


# Airtable Formulas

Airtable formulas bring a lot of magic to your 3DVista tours. Formulas are not automations, allthough it might feel like that.

The official documentation related to Airtable formulas can be found here:

{% embed url="<https://support.airtable.com/docs/the-essentials-of-airtable-formulas>" %}

However, that might be a bit overwhelming in the beginning. That's why we have created our own documentation to keep things relevant.


# Formula: CONCATENATE()

Creating a dynamic sentence that includes the product name and price.

The Airtable formula we use the most is CONCATENATE(). This formula can combine various other fields into one. Consider it a formula that can create sentences from words. Some words are static and other words dynamic.

In the examples below we have three products with product titles and prices.

To make static sentences, we use double quotes. Let's say: Buy this product.

Then we make a formula:

```
CONCATENATE("Buy this product.")
```

| Product        | Price | Sentence          |
| -------------- | ----- | ----------------- |
| Nice Water     | €1    | Buy this product. |
| Hard Rock      | €2    | Buy this product. |
| Sharp Scissors | €4    | Buy this product. |

As you can see, we have now always the same sentence. But what if we want to mention the product name instead? So we like to say something like: Buy this {product}. Now we need to use a comma to combine the static with dynamic as you will see in the example below.

```
CONCATENATE("Buy this ",{Product})
```

| Product        | Price | Sentence                |
| -------------- | ----- | ----------------------- |
| Nice Water     | €1    | Buy this Nice Water     |
| Hard Rock      | €2    | Buy this Hard Rock      |
| Sharp Scissors | €4    | Buy this Sharp Scissors |

To take it one step further, we can make it a sentence that says: Buy this {product} for only {price}!

```
CONCATENATE("Buy this ",{Product}," for only €",{Price},"!")
```

| Product        | Price | Sentence                             |
| -------------- | ----- | ------------------------------------ |
| Nice Water     | €1    | Buy this Nice Water for only €1!     |
| Hard Rock      | €2    | Buy this Hard Rock for only €2!      |
| Sharp Scissors | €4    | Buy this Sharp Scissors for only €4! |

Now you've learned how to combine multiple fields into one sentence.

See what happens when you change the name of the product or the price. It will also update the formula.


# Formula: IF()

Creating a dynamic Buy button based on stock inventory.

Let's say we have a stock for each product. And if a product is in stock, the button in 3DVista should say: Buy. But if the product does not have anything in stock it should say: Sold out.

Now how do we do that?

<table><thead><tr><th>Product</th><th>Price</th><th data-type="number">Stock</th><th>Button Text</th></tr></thead><tbody><tr><td>Nice Water</td><td>€1</td><td>50</td><td>Buy</td></tr><tr><td>Hard Rock</td><td>€2</td><td>0</td><td>Sold out</td></tr><tr><td>Sharp Scissors</td><td>€4</td><td>3</td><td>Buy</td></tr></tbody></table>

Using the IF() formula.

```
IF({Stock}=0,"Sold out", "Buy")
```


# Edit content button

Creating an "edit this content" button inside the virtual tour

Creating an "edit this content" button inside the virtual tour so that you can go directly to the specific record in Airtable.

We need to have the base url and add the record ID at the end.

Let's use this base URL as an example:

<https://airtable.com/appfHlukr153NhuEm/tblddO21k8F8rZlgr/viwk7vpIbHMLR2wRu/**recO4hbxXg033akde>\*\*

The first part is the Base ID, then followed by the Table ID, with at the end the Record ID, which is recO4hbxXg033akde.

So we get the static part of the url:

```
CONCATENATE("https://airtable.com/appfHlukr153NhuEm/tblddO21k8F8rZlgr/viwk7vpIbHMLR2wRu/",
RECORD_ID())
```

Now we can simply map this formula field with a button's URL inside 3DVista and call it "Edit this content".


# Include Youtube or Vimeo videos with Skin CMS to 3DVista webframe

A standard youtube-url is not going to work when filled in Airtable and linked to a 3DVista webframe. You'll need the embed url which can be found when you hit share, embed video and then in the \<iframe code you can find something src=".....". That link is the embed link.

Now instead of copy pasting all of those through this method, you can use the following formula to generate the Youtube embed urls from the standard youtube-url. Replace {Youtube url} with your fieldname.

```airtableFormulas
CONCATENATE(
  "https://www.youtube.com/embed/",
  RIGHT({Youtube url}, 11)
)
```

The formula counts the 11 characters from the right side and places this Youtube ID inside the embed url structure.

Vimeo has 9 characters, so the formula is slightly different:

```airtableFormulas
CONCATENATE(
  "https://player.vimeo.com/video/",
  RIGHT({Vimeo url}, 9)
)
```


# Automations

Selecting your automation tool of choice.

With automation tools you can combine various tools with each other. In most cases you don't need to be a developer to do these things. But you will need an automation tool that simplifies this for you.

There's various automation tools. Zapier is the most well known automation tool with a higher price point and lots of compatible software to combine. However we prefer Make as it has a lower monthly fee, easy to understand as well and flexibility with routers. If you don't know what routers are, don't worry.

Beside Zapier and Make there's also opensource automation tools such as N8n. The power of opensource is that you only pay the monthly fee for hosting it and you get an unlimited amount of automations for that. You also host the tool yourself. And with that comes responsibilities to protect it yourself. Also you start to see a bit more code and things tend to get slighly more complicated.

So for the documentation here we use Make as the example. But you can always decide to use the other automation tools as well. It's mainly about understanding the principles.

If you have't created a Make account yet, feel free to use this [link](https://www.make.com/en/register?pc=learnfromcreators).


# Updating stock inventory

Dynamically changing the stock inventory using Make

![If order from Shopify is completed, find record & update stock inventory -1.](/files/JQDumav9g0BanGrRHvEv)

*If order from Shopify is completed, find record & update stock inventory -1.*

![](/files/8Ary7I31PFQUznuCr1O2)

*If order from WooCommerce is completed, find record & update stock inventory -1.*

![](/files/06sWvgWMCdxrB05cQekx)

*If transaction in Paypal is done, find record & update stock inventory -1.*

![](/files/lbSxOUuEDQg0DmaBLJXC)

*If checkout from Stripe is success, find record & update stock inventory -1.*


# Limitations & workarounds

### Exceeding the maximum records

Each Skin CMS plan has it's own set of maximum guaranteed records. If you exceed the maximum of records, things might and very likely will break.

Upgrade your package to get more guaranteed records or reach out to us if you already have the plan Business.

### Airtable rate limit

A request is made each time a user enter to the virtual tour. Our Core, Freelancer and Business plans have up to 5 users each second.

When a 6th user enters within the same second, the user will receive a 429 status code and needs to wait 30 seconds.

**Workaround**: To overcome this limitation, a custom caching proxy is needed. Feel free to reach out to us.

### Airtable field formatting gets lost

For example with the field `formula`:

When you format the currency and in formula you have `10,00 $`, the value returned by the Airtable is `10`.

**Workaround**: The workaround is to turn the field into plain text, using CONCATENATE() formula.

### Uptime

We have our server on Supabase, guaranteeing 99,99% uptime. If for whatever reason (such as maintenance) we need to take down the server, we will inform at least 7 days before and intent to keep it as short as possible.


# Troubleshooting

Common errors and why they happen

## root error 404 no such file or directory (or error 2)

![](/files/5zMKXyBu9nIUEPs39ys6)

Reason "[www.360creators.com](http://www.360creators.com)" used instead of "<https://www.360creators.com>" inside Airtable.


# Quick Start

## 1 • Create Airtable Base

Give the base and table a name.

Create a number field to identify the record, such as a "ID".&#x20;

<figure><img src="/files/YFcuMEAjPw79PAQniETs" alt=""><figcaption><p>Give each record a number, such as 1, 2, 3 and so on. Or use autonumber field to automatically generate those numbers for you.</p></figcaption></figure>

## 2 • Generate two Airtable Access Tokens

Open [Airtable.com/create/tokens](https://airtable.com/create/tokens)

1. Mapper with permission `schema.bases:read`
2. 3DVista with permission `data.records:read`

*Select only the base that you want to access for this.*

## 3 • Get 3DVista setup code

As you are logged into Skin CMS, you create a new mapping. Fill in the mapping name as you like. Paste in the two access tokens you just generated in step 2, followed by the Base ID and Table name.

<figure><img src="/files/dOljxXzOgbpMBLqyZaUx" alt=""><figcaption><p>Base ID is in the URL <code>app2R25X8ayTYu1V0</code>, while <code>Amazon.com</code> is the table name.</p></figcaption></figure>

After filling out the mapping configuration, you hit Save and connect Airtable. Optionally you can already map one field such as the Title with a skin label in 3DVista called "Title". Otherwise Save mapping to continue. In the 3DVista setup tab, you click `Copy 3DVista code to clipboard`.

Then getting into your 3DVista project, go to Skin > Main Viewer > Add Action > Execute Javascript > On Initizaliation > paste setup code

<figure><img src="/files/sCu6GoFUmkQyipnL0VRQ" alt=""><figcaption><p>Skin > Main Viewer > Add Action > Execute Javascript > On Initizaliation > paste setup code</p></figcaption></figure>

## 4 • Add Triggers

As we've created in step 1 a field called `ID` with numbers starting at 1, we can use the following Javascript snippet to trigger the record.

```javascript
window.BlazeCreators_skinCMS.openRecord(1, "ID");
```

To open record number 2, we just change the number 1 to 2. If you would rename the ID field to something else, then you'd need to rename that as well in the trigger.

***

That's it! Now you can start adding skin components in 3DVista, give those unique names and map them in Skin CMS.

Still having questions? Do not hestitate to ask! <https://skincms.com/contact>


# 3DVista Label

3DVista Label represents a single line of text. Good use for titles.

Compatible Airtable field types:

* Single line text
* Formula
* Number
* Email
* Single select


# 3DVista Multiline

3DVista Multiline works well if you have product descriptions or long sentences that might need more space on smaller screens.

Compatible Airtable field types:

* Long text
* Formula

{% hint style="warning" %}
Multiline needs to have "PLACEHOLDER"
{% endhint %}

Multiline skin component needs to have all the text replaced with the content `PLACEHOLDER`.

<figure><img src="/files/CVGpqddeitKsfrljHW5c" alt=""><figcaption><p>The example above is how it's showing up by default and how it is supposed to look below with <code>PLACEHOLDER</code>.</p></figcaption></figure>


# 3DVista Image

Compatible Airtable field types:

* Attachment

{% hint style="info" %}
Keep in mind that it will take only the first image.
{% endhint %}

### 3DVista Photo Album

{% embed url="<https://www.youtube.com/watch?v=nIaO6qNIzu0>" %}
Creating a photo album assuming each record has the same amount of photos.
{% endembed %}

{% hint style="success" %}
Under sponsored development: multiple images, no matter if one record has two images, while another record has three images.
{% endhint %}


# 3DVista WebFrame

Embed anything dynamically into 3DVista. Such as Youtube videos, Matterport tours, 3D models, dynamic lead forms.

Compatible Airtable field types:

* URL
* Formula


# 3DVista Button

The button has two attributes: the link to open as well as the text to show on the button. Both can be set from Airtable with Skin CMS.

## 3DVista Button URL

Dynamically link to the checkout URL of a product.

Compatible Airtable field types:

* URL
* Formula

## 3DVista Button Text

Change text of a button from "Purchase" to "Out of order" using an Airtable formula linked to the 3DVista button text.

Compatible Airtable field types:

* Single line text
* Formula

{% embed url="<https://www.youtube.com/watch?t=120s&v=mG_PlZiUJ3Y>" %}


# Dynamic Photo Album

A dynamic photo album in Skin CMS means that you can show 1 image, 2 images or way over 10 images and depending on the record that you're triggering, it will detect whether it's single or multiple images to show.

If it's a single image, it will hide the previous and next buttons, but if the record contains 2 or more images, it will show the previous and next buttons automatically.

<mark style="background-color:red;">Keep in mind that you need to compress the images before importing to make sure it loads fast enough.</mark>

{% embed url="<https://www.youtube.com/watch?v=Bb0SNxCYIxI>" %}
Tutorial showing you how to do it
{% endembed %}

### Gallery template

Download the template and connect your Attachments field in Airtable with `SkinCMS_Gallery_Container`.

{% file src="/files/8q3LN6KjI3R6PGD4Ebui" %}

### Creating your own custom gallery

In order to make this work you create in 3DVista:

* Container and call it `SkinCMS_Gallery_Container`\
  *(not an 'image', even though images will appear in here)*
* Two buttons located inside SkinCMS\_Gallery\_Container.
  * Call the previous button `SkinCMS_Gallery_Previous`
  * Call the next button `SkinCMS_Gallery_Next`

In Airtable you've created an attachment field and uploaded one or more images in each record.

In SkinCMS you connect the Airtable's attachment field with `SkinCMS_Gallery_Container`

### Multiple Galleries

In case you need more than one gallery, which is exceptional, you can duplicate the SkinCMS\_Gallery\_Container and add a `2` behind Container like `SkinCMS_Gallery_Container2`. Keep the names for the Previous and Next the same within Container2. And connect this to another attachment field in Airtable.


# Mobile sync

As long as you keep the same name in desktop and mobile, it will keep the content in sync there as well.[<br>](https://youtu.be/7PIsgsHpApY?si=_NsBgLuBKSL3aEIg\&t=453)

<figure><img src="/files/forcZuBPGimD1SalsozK" alt=""><figcaption></figcaption></figure>


# Map multiple 3DVista skin components

One Airtable Field can be mapped to multiple 3DVista skin components using a comma. Create a nice hover effect to show the price plus something for the pop-up to show the price there as well.

<figure><img src="/files/MLP2PLLCwgWncQfHUSPR" alt=""><figcaption><p>Using the same single <code>Number</code> field in Airtable for two 3DVista skin components called <code>price-popup</code> and <code>price-on-hover</code>.</p></figcaption></figure>

{% embed url="<https://www.youtube.com/watch?v=rZ0gVdJWH4k>" %}


# Attribute Styling

Mapping attributes is similar to mappings values. Let's consider a simple mapping of an Airtable field called "Product title" to a 3DVista component called "Title":

![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252F0lrGJf0zxBHmu2A7cs4y%252Fattributes%2520img%25202.png%3Falt%3Dmedia%26token%3D505ec186-b89b-4d91-9dfb-800b6914df7e\&width=768\&dpr=4\&quality=100\&sign=8a978f8c\&sv=1)

This results in the Airtable record's value being mapped to the "Title" component:

![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252Fxld6Pk2c7BD26ubSmqBt%252Fattributes%2520img%25201.png%3Falt%3Dmedia%26token%3D04664766-e32d-4451-8ba7-5c958f0729ba\&width=768\&dpr=4\&quality=100\&sign=110fb29b\&sv=1)

Mapping attributes is very similar. Let's say we want to change the color of the Title and we want to use a value from Airtable. The color can be computed, for example depending on the product's status it can be green if the product is available or red if the product is sold out - we can use a formula field to achieve this:

![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252FLsA3RJYxUctMCQyX176I%252FScreenshot%25202023-08-07%2520at%25205.39.32%2520PM.png%3Falt%3Dmedia%26token%3Dbedcb941-108f-4545-9b3e-5fa633f10aaf\&width=768\&dpr=4\&quality=100\&sign=df995967\&sv=1)Let's create a new field "Product title color" with a computed value depending on the value from the field "stock"

![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252FmaKhIzC7xvzNKT2pwIXE%252Fattributes%2520img%25203.png%3Falt%3Dmedia%26token%3D69454727-d10a-47e5-bca7-8bdedff45516\&width=768\&dpr=4\&quality=100\&sign=b8ad5a42\&sv=1)Let's map the new "Product title color" to the component "Title" but this time to an attribute "fontColor"

Voilà, there we have the color of the "Title" component changed:

![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252FAyHA5eDV4C8tANG6tgvZ%252FScreenshot%25202023-08-07%2520at%25205.43.23%2520PM.png%3Falt%3Dmedia%26token%3Dfa01bec8-c779-424a-b8d5-60520415852d\&width=768\&dpr=4\&quality=100\&sign=2e7eb5d\&sv=1)![](https://skincms.360creators.com/~gitbook/image?url=https%3A%2F%2F1255537287-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FAIpTye4Y11o6Vmz9cFLj%252Fuploads%252F2oEmBSP7gNyoSJxyb2Dp%252FScreenshot%25202023-08-07%2520at%25205.43.51%2520PM.png%3Falt%3Dmedia%26token%3D0444f06f-3e71-479c-8f41-a37e789c97c7\&width=768\&dpr=4\&quality=100\&sign=f38d2ef4\&sv=1)

With attributes you can change the component's style, position, alignment etc.


# 3DVista Functions

Intermediate

Writing a custom Javascript Function allows you to use the data from Airtable into your functions. Write it yourself or combine it with the Javascript API V2 library.

<figure><img src="/files/Hf2KBOud9swh8SQugBkM" alt=""><figcaption></figcaption></figure>


# Show or hide Hotspots

This custom function allows you to show or hide hotspots based on the single select status in Airtable.

{% embed url="<https://www.youtube.com/watch?v=DP7Mp5pGwGY>" %}

Steps after downloading [free projectfiles](https://360creators.com/free-building-template?utm_source=documentation) (updated)

1\. [Copy Airtable base](https://airtable.com/appapGs8w9nvE4eAy/shrWGmtOmOkuXqCNP) to your own workspace

2\. Create Skin CMS Mapping with the base above

3\. Copy Skin CMS 3DVista code onto Main Viewer (on init)

4\. Copy Javascript v2 code onto Main Viewer (on init)

5\. Copy mapping ID from Skin CMS into the action with function processdata in between double quotes as shown in the video.


# All videos • Youtube Playlist

{% embed url="<https://www.youtube.com/watch?list=PLk9V6QZq6escQoksH9qEqA3pP4wmpg7cp&v=7PIsgsHpApY>" %}
Playlist of all Skin CMS videos
{% endembed %}

Playlist: <https://www.youtube.com/watch?v=7PIsgsHpApY&list=PLk9V6QZq6escQoksH9qEqA3pP4wmpg7cp>


# Collaborate in Airtable

Editors & Commenters

Collaborate with your clients in Airtable. They can comment or edit the content themselves. Edited content will reflect itself instantly in the 3DVista tour. No need to re-upload your virtual tour.

## Data Tab

The Data tab is the most straight forward way to edit content in. In here you can create different views. Such as a form or a Gallery view to visualize the content in. You can name a view for yourself as well as having a view for your client which might see fewer fields to keep it simple for the client.

{% embed url="<https://www.youtube.com/watch?t=356s&v=7PIsgsHpApY>" %}

## Interface Tab

If you'd like to take it a step further to simplify it for your client, you can create an Interface instead. This has the advantage that you can select which fieldtypes can be edited and which ones can not.

{% embed url="<https://youtu.be/7PIsgsHpApY?feature=shared&t=569>" %}

***

In both tabs you can add comments to discuss the content.

{% hint style="info" %}
Free Airtable plan has up to 5 free editors and 50 commenters within the workspace. You can create a workspace for each new client.
{% endhint %}


# Right click edit this content

Intermediate

Let the client edit the content viewing the virtual tour and clicking an edit button.

{% embed url="<https://youtu.be/upwSxQXhhbo?feature=shared&t=630>" %}


# Linked records to Categorize

{% embed url="<https://youtu.be/gyWQpbeJA_A>" %}


# Dynamic buy button with stripe

{% embed url="<https://youtu.be/mG_PlZiUJ3Y?feature=shared>" %}


# Common errors

**Multiline text does not work**\
Make sure you're replacing all content in multiline with PLACEHOLDER

**Content does not load on mobile**\
Check that the script is running on both the MainViewer of Desktop and MainViewer of Mobile skin. Also make sure you're running https instead of http.