Plese help me with this workflow

WEB TMS WEB Core
1

Let's say you have a site (WEB Core app) that's sort of like LinkTree.com that serves up V-Cards. (ask Google if you're not sure what they are)

Someone goes to your site (built in WEB Core) using a query-string arg (user-ID) and it brings up a V-Card corresponding to that ID. It hosts many different users with their own unique IDs.

There's a button on the page that says [Save Contact]. When they click that button, it downloads a .vcf file (with YOUR info in it) and saves it to the Contacts list on their phone. The process is similar on both iOS and Android, in that when they attempt to "open" a .vcf file, they know it's got contact info in it and may ask to save it to the Contacts list or may save it automatically. That is, they KNOW what a .vcf file is.

QUESTION #1: How can I make this Save Contact feature work? Also, how can I know if it's running on a mobile device?

Once the .vcf data has been saved to their phone, a form pops-up and asks them to enter THEIR contact info; then they press a [SEND] button to SEND it to your app.

QUESTION #2: Is there anything on most phones that contains the OWNER'S contact info that can be used to fill in this form? (People share their info a lot, but they always seem to have to enter it manually all the time. I do anyway.)

The app needs to do some stuff with it behind the scenes. There will be some options: one might be to save it to a DB or CRM; one might be to send a text message (SMS) to YOUR phone with the details; one might be to trigger something else to do with the data (a la Zapier).

QUESTION #3: Does this logic go into the app, or does it need to be done in the back-end service? or a little of both?

There must be an ADMIN side to this that lets you set up your profile, the V-card (a graphic design with your image on it, some text and links on it, all of which is saved in a JSON record that represents a .vcf file), enables some options, and connects to the back-end services you'll need.

The V-card is a "template" and there needs to be substitutable arguments in it that are replaced with actual data. (Remember, it's a web page.)

QUESTION #4: Are there any components I can use to implement the graphic editor needed to create and edit the "bio" card template? If not, what's the best way to address this?

==========================================

BACKSTORY: This already exists, more or less, except the guys who provide it charge an absurd amount for it. To support 120 contacts, they want $1100 / month. That's because they stuffed this logic into an existing back-end service that doesn't use most of the features, and the CRM it uses is independent and costs a lot more but only uses a limited number of its features as well. They have no incentive to reduce their costs since people seem to be happy paying their fees. (!)

Also, there are some aspects that I didn't describe here that don't work well, and they've been really slow to deal with bugs and enhancements.

I don't think this is very complicated, nor should it be hard to maintain. I'm just not sure how to deal with some of the pieces that I have questions about.

2

Q1: in the answers here, just replace PDF with VCF: Download a file from XData Service
Q2: I'm not aware the mobile browser has access to it, but as soon as you filled in a couple of forms with your info, the browser should auto suggest
Q3: This could be both but I'd rather recommend backend
Q4: I'm not sure what you mean with " the "bio" card template" ?

3

Thanks. the ["bio" card template] was a typo. I changed earlier ones to "V-card" since that seems to be a more popular term. By the time I caught it, I couldn't edit it.

I did find several examples related to #1 and it's not what you'd think. The links actually look like this:

<a href="vcard;base64,[your base64-encoded vCard]" download="First Name Last Name.vcf">Save data to your contacts</a>

That was snagged from a tutorial that was saying what to have the [Save to Contacts] button do when you click it. I found this same approach on several similar sites that offer V-cards.

The href is an inline chunk of data that can be rather large if there's a photo included.

As for #4, what I'm looking for is an HTML editor that acts like a simple version of Canva that allows substitutable arguments like for email autoresponders. Is there something like that available that can be used in WEB Core? Maybe a js lib? (A graphics editor, not just a text editor.)

I want someone to be able to create a template, like a business card for a company, and then give that to their employees to use without altering it. Just change the values in some form fields and it will display the person's details as a V-card where the design is the same for everybody in the company.

Alternatively, they could just design it in something like Canva and then export it as a JPG or PNG or maybe even SVG, but how do you position the substutitable text over it? Layers? Or maybe use a PDF instead? (Graphical stuff like this isn't my thing.)

In this case, if an external template is used, or converted to a flattened image, the href would point to something like a php script that serves up the results of a query. Or maybe the WEB Core app can generate it directly ... I'm unclear how that might be done at the moment.

4

Afaik, the vcard format is a textual format with optionally some graphic resources in it.
I'm not sure how to understand you seem to want to an image with contact info superimposed?

Wrt graphical editors, I do not have experience with this.
Maybe this is a starting point:

5

re: V-card format: I found a tutorial that shows this as the format for the link. I also looked at what several sites do and this author probably got it from them, because it's rather popular.

Most sites that support V-cards only provide some themes and have a very simple way of adding links to them that looks like buttons. They also usually have an option to upload a headshot image. They are not ad hoc graphic editors, and they don't tend to allow you to upload a background image. That is to say, they're not very flexible.

Polotno is overkill for what I need.

I'm unclear if it's sufficient to allow a background graphic and then just display things on it. But if you want a headshot in a specific place and some buttons for links and maybe graphic icons for specific sites (FB, LI, Google, etc.), that probably needs a page layout so things don't overlap, right? Graphic design isn't my thing, and I try to avoid it at all costs. Unfortunately, most graphic artists don't know much about web page design and layout other than how to create them in InDesign or something like that.

I've seen a few custom V-card pages, and they're all hand-crafted HTML and CSS.

Maybe it's a simple idea with a complicated solution?

6

It's a simple idea with an easy solution with TMS products, of course. I might be a bit biased, of course ;-) Here's what it - in my opinion - comes down to essentially. You find examples for all these steps for free on the YouTube channel. Iirc you also have my XData course, which can be a guide how to create the backend.

  1. Create the HTML/CSS for one card.
  2. Create your backend which delivers a list of all the "cards" you want to list.
  3. Iterate the list of cards and generate HTML. Your CSS will then create the list and everything as desired. You can use your <A> approach. I suggest adding another backend link that delivers the user business card in VCARD format so the browser will save it when somebody clicks the link.

So, design-wise you need to create one card. In TMS WEB Core you implement the fetching and generation of the HTML tags in the DOM.

Funny you mention this example as I have seen LinkTree a while ago and wondered if I should provide an example for how something like that is created. As you might have seen I created a few videos recently which featured DOM manipulation. I opted for driving instructions with a map instead. However, this is still on my list and I might tackle it at some point.

7

Well, you collapsed ALL of the following details into one line: "1. Create the HTML/CSS for one card".

Sure ... but how? That's my question. The LinkTree approach won't work. What are my options? Here's what's required:

If you look at a bunch of different sites that host V-cards, like LinkTree, they have a number of templates you can choose from. They have a particular audience they're going after, and these templates seem to fit that audience. But they are not a design that most established companies would want to use as a business card design, as they already have a design in place, and their people are required to stick to it. (I'm talking about companies with more than one or two employees.)

If you go to a business networking meeting, however, and you collect a bunch of biz cards from people, they're all over the map in terms of their designs. Even for people who are network marketing reps: everybody for the same company is required to use the same card design. If you lay them out on a table and you look at them, then ask yourself, "Hmmm, how could I build a graphical editor that would let me realize all of these as templates?", that's the question I'm trying to answer.

The difference is that the audience for companies like LinkTree is a huge number of people with highly personal tastes and individual needs. Their "templates" can be customized by changing the colors of elements; adding more or fewer social media links; maybe adding a headshot and some other image, like a logo; changing the background image; maybe some personal details in a popup. They're all derived from just a few standard layouts that people can "dress up" to personalize them. No mandated logos, no corporate color schemes, no brand-specific fonts or layouts are required.

Businesses are just the opposite: their logos and branding need to follow very specific guidelines. Sometimes they're even called out in the company's trademark registrations. They layouts are designed specifically for the company and must be used for dozens, hundreds, or thousands of their employees, and they all need to match exactly. Personalization is prohibited, other than a few fields like name, phone#, email, and maybe one or two social media IDs. Most of the cards I've been given throughout my career also had the company's address (where my office was located), their phone# with my personal extension, and my title. That was it.

These are polar opposite requirements. LinkTree's users have a one-and-done requirement that's highly personalized. But a company wants a rigidly defined template that possibly thousands of people can copy with minimal personalization of just a few text fields.

LinkTree's approach is simple.

My challenge is how to create templates for businesses that can be shared by a bunch of their employees using parameterized fields for the (minimal) personalization. They're going to have a common account where that template is defined, and then someone will have the job of creating new user accounts that are assigned their corporate template, along with their personal data. Maybe the users can edit the data, but not the templates and standard text (eg., office address and phone#, etc.).

It's possible that the branding can be accomplished with a simple background image, although the logo and typographics probably shouldn't be obscured by randomly placed text fields -- they probably should all be in the same place, or at least NOT in certain protected areas, for all users.

Once they've been created, saving and retrieving them is simple. It's this creation process that's puzzling me. TMS has lots of editors that work great for text; I need something that's suitable for this particular use that supports some strict graphical details.

8

You create it like with any other web framework on this planet: HTML and CSS. TMS will never be able to provide a solution that checks all the boxes. Providing a framework that allows both component and DOM-driven development is the perfect solution. Most other web frameworks do not have a designer, lack components and are completely command-line driven.

For me, TMS provides the framework. Just like TMS offers components for VCL from Embarcadero, third party can offer business templates for TMS WEB Core.

9

Maybe you don't need exactly a TMS component with embedded graphic editor.
I work for a company like those you mentioned - every year we receive new brand standards: colors, fonts, sizes, etc. The first thing I do in my department is prepare some customized Office themes and share. Maybe you could get the templates made in Excel and then implement a service that uses FlexCel and apply dynamic data. Or even in Word, and then use a similar method to customize dynamic content.

I don't know about FNC Blox resolution output, but I believe you could achieve acceptable results with it. One may set some blocks text as #Name# #Company#, etc , and then you could replace text. And there's a web editor! :smiley: