1. Help Center
  2. Getting Started

Visual Card Editor Overview

A Quick Overview of Basic Functions and Tips to Help You Design Your Card using the OneTapConnect Visual Editor

** THIS ARTICLE APPLIES EXCLUSIVELY TO THE NEW VERSION OF THE ONETAPCONNECT PLATFORM CURRENTLY IN BETA.

FOR INFORMATION ABOUT THE CURRENT PLATFORM, PLEASE REFER TO  THIS ARTICLE.

OTC-editor

Welcome to the OneTapConnect Visual Editor!

Here are a couple of terms to help you get started:

  • A "section" is a container, such as "Services" or "About me."
  • A "block" is any element that goes inside a section, such as buttons, text, images, etc.

By default, we’ve included one of each type of section on your card so you can see what’s possible.

While most blocks are automatically populated using your saved profile information, some will display filler text and blank images that are easy to replace within the visual editor itself. Please note that any blocks or sections can be personalized, moved, duplicated, hidden or deleted as desired.

And now, for the grand tour!


Editor Preview in the OneTapConnect Visual Editor

In the center of your screen is a preview of your digital card. 

This preview is interactive, so you can scroll up or down to get a sense for how your card would look on a mobile device.

It is also continually updated, so you can view changes as you make them. 

Pretty cool, right?!

For easier navigation, click the element you would like to edit in the editor preview, and the corresponding sections and blocks will be opened in the navigation menu on the left side of the screen.


Header functions and buttons in the OneTapConnect Visual Editor

At the top of your screen are a few important buttons:

  • The blue “Global styling” button enables you to make changes that affect the look of your whole card. These options include color themes, backgrounds, font styles, and more!
  • The “Undo/Redo” arrows make it easy to backtrack or repeat any actions you’ve taken.
  • The green “Publish changes” button will save your work and publish any changes you’ve made to your digital card.
  • The blue “View card” eye icon allows you to view the latest version of your card as it currently exists online (before any other changes or updates have been saved and published).

If you decided not to add your own colors in the branding section of your profile, you can choose between four different color theme presets, as well as "light" or "dark" modes, in “Global styling.”


On the left side of your screen you can add, move, delete or edit elements.

section

To add a section to your card: 

  1. Click the “Add section” button to open a menu of options to choose from. 
  2. Click and hold the section you want to add.
  3. Drag and drop your selection directly into the navigation menu.

 

 

Adding a block in the OneTapConnect Visual Editor

To add a block to your card: 

  1. Click the name of the section you want to add a block to in the navigation menu. This will open a dropdown menu showing existing blocks within that section. 
  2. Click the “Add block” button to view your options.
  3. Click and hold the block you want to add.
  4. Drag and drop your selection into the appropriate section within the navigation menu.

move-trash

To move/reorder existing elements:

  1. Click and hold the ‘bars and arrows’ icon on the left side of the element’s name in the navigation menu.
  2. Drag and drop the selected element wherever you’d like it to end up. 

 

To remove a block or section:

  1. Click the 'trash can' icon that appears when you hover your cursor over an element’s name in the navigation menu.

 

While you can always replace deleted elements by adding a new block or section, any sections you add will be reverted back to their original, defaulted state. In other words, any edits you make within the card editor itself will be permanently deleted if the element they’re associated with is removed from your card.


At the bottom-left corner of your screen, you can exit to your dashboard.

The "Back to Dashboard" button in the footer of the OneTapConnect Visual Editor

This is helpful in case you need to go back and update your profile information.

Remember, can upload images, save links, select colors and write/edit text within the card editor itself, but it may be easier to go back and finish filling out your profile information using the forms we’ve designed to streamline this process.

Your progress will automatically be saved if you choose to close or leave the webpage, but any changes you've made will not become live until you click "Publish."


That's it for the overview!

Once you're satisfied with your design, you can publish and start using your new OneTapConnect digital card anytime.