I have been dreaming of this moment since I started my first company in 2008 called Personal Golf Holidays, which has as its logo the earth in the shape of a golf ball with an arrow wrapped around it to give it a feeling of movement and an energetic image of the company.
I would have liked to have had the golf ball spinning on its axis like the earth and the arrow wrapping around it like a victorious arm during a magnificent approach that ended in this damn little hole! but it was not possible!
Since then, technology has evolved and over the years more and more companies have also wanted to create animated logos and/or short animations that convey a more targeted message in order to increase their visual impact!
If you do not know how to code and you want to have a standard Virtual Business Card or an animated Virtual Business Card, you can send us here the original design of your business card with a precise description of your needs, and we will quickly inform you of the price to code your Virtual Business Card.
You Know How to Code?
It's easy, start by considering some important information before you begin, at the moment, you can code your Virtual Business Card using :
At the moment it is not possible to use :
Html : Html Preprocessor ( Haml, Markdown, Slim, Pug ).Ajouter des Class(es) to <html>.
Stuff for <head>.
CSS : CSS Preprocessor ( Less, SCSS, Sass, Stylus, PostCSS ).
CSS Base ( Normalize, Reset, Neither ).
Vendor Prefixing ( Autoprefixer, Prefixfree, Neither )
JS : JavaScript Preprocessor ( Babel, TypeScript, CoffeScript, LiveScript ).
Adding an External Links
Files Dimensions & sizes
Virtual Business Card
| Size & Ratio : | min. 345 x 220px max. 1725 x 1100px |
| Weight : | max. 15Mb |
Files, Shapes, pics, etc...
| Format : | Jpeg, Png, Svg, Gif |
| Numbers of files : | Unlimited |
| Library size : | 10Mb |
Add Shapes or Images
If you do not create your shapes by encoding them, you must upload them to our library, then paste the links into your code.
Once your elements are uploaded, you just have to select your shape or peak to copy the link to paste in your code.
IMPORTANT : The VBC - The Virtual Business Card adds your VBC Recto ScreenShot to your invitations that you will send so that the people who receive it will see your profile picture as well as below your Virtual Business Card. To do this, it is essential to upload your images, icons, etc... on our server.
IMPORTANT : If you have an animation on your VBC and you want the people whith who you shared your VBC can see it when they will open your invitation, you will need to create a GIF of your Virtual Business Card and upload it as your Screen Shot.
You should created it before coding your VBC as you will need to upload it at the end of your VBC creation process.
Here our tutorial : How to create a GIF of your VBC?
Adding external elements
You can call through external links fonts, icons, images, etc...
The links to images, icons, etc... placed in your code will be visible on your screenshot.
In order for your prospects, clients to interact with your Virtual Business Card by tapping on links or icons. please follow these instructions. Some basic Html
Phone, Mobile or Fax N°
Tap on the Phone Number to make a call.href=“Tel : +41 79 855 40 88“>41798554088</a>
or
href=“Tel : +41798554088“>41798554088</a>
Tap on an icon to make a call
<a target=“_blank"href=“Tel : +41 79 855 40 88“>41798554088</a><img src=“https://vbc.app/uploads/my_phone_icon.png“></a>
Tap on the on the mail address to open mail.
<a target="_blank" href=“your_name@gmail.com“>your_name@gmail.com</a>
<a target=“_blank “
Tap on an icon to open mail.
<a target=“_blank"href=“your_name@gmail.com“>your_name@gmail.com><img src="https://vbc.app/uploads/my_mail_icon.png"></a>
Map
Open your address in our map.
To display correctly your address in The Virtual Business Card, you will need to copy the code that will generate for you.
1. After chooing to create a Pro VBC, add the address that will be show on the map ( actually you can show only one, soon two )
2. Then choose the icon “ </> “ You know how to code?
3. Simply copy and paste these few lines into your code.
<div class="address"> <span>Au Village 28b</span> <span>Soubey</span> <span>2887</span> <span>Suisse</span> </div>
Tap on an icon to open the map.
<a target="_blank"href=“maps.google.com/?ll=38.882147,-76.99017“><img src=“https://vbc.app/uploads/my_map_icon.png“></a>
Website and other links
Your website showing the URL.
href =“https://your_ website.com“
Your website without showing the url - for i.e : Check out my Site! - VBC.APP - etc...
<a target="_blank" href=“https://vbc.app/“>VBC.APP</a>
<a target=“_blank “
Tap on an icon to open your website.
<a target="_blank" href="https://vbc.app/"><img src=“https://vbc.app/uploads/my_website_icon.png“></a>
Social network
Showing the URL of the social network i.e : Facebook.
href =“https://www.facebook.com/TheVirtualBusinessCard/“
Tap on an icon to open your social media page.
<a target="_blank" href="/https://www.facebook.com/TheVirtualBusinessCard/"><img src=“ https://vbc.app/uploads/Facebook_icon.png"></a>
Note : You can call the icons also by using CSS
Animation : code of conduct
Before you start your animation, note that an animation can disturb the user if it is too present or if there is not a pause at the end of your message!
Use animation to highlight your message and not to make your customers suffer from an epilepsy seizure! 🥴
Start creating your Animated VBC
Follow the creation steps until the screen where you can choose what kind of VBC you like to create, there you have to choose the Pro VBC, name your Virtual Business Card and save it. On the next screen you can choose the way you like to create you VBC, from there choose the icon </> You Know How to Code?.
Recto animated VBC
-
Copy and paste your code or directly write your code directly on the spot.
-
After choosing the icon to paste your code, select the appropriate tab ( Html, Css or Js) to paste your code, then type into the coding space and the cursor will display, then simply paste your code.
-
To add the link of an image or icon that is in your library, go to it and simply press it to copy the link and paste it into your code
-
Repeat this step for the other tabs.
Note : To quickly delete all your code, go to the bottom center menu and press the button “ erase my Html code ", “ erase my CSS code " or “ erase my Js code “.
-
Once these steps are done and you are satisfied, press the save button at the bottom right.
The best is to upload the design of your VBC with or without animation at the end of the process.
Accept file : jpg, png gif-
Take a ScreenShot of Your VBC when you want people to discover it on their invitations or upload a peak of your VBC so that it can be taken when you want!
-
It's time to create the Verso of your VBC if you have one, or press the button at the bottom left of the screen for " I don't have a Verso “.
Verso
-
Do the same steps as for the Recto and everything will be fine ;)
-
After saving your VBC, you will be directed to the next step in creating your profile.
Good luck in the creation of your new Animated Virtual Business Card, I can't wait to see what you gonna create! see you soon!
