No internet connection
  1. Home
  2. Support

Integrating with static site using VueJS

By Chris @smartops
    2019-07-19 18:33:33.989Z

    Hi, I'm building a social platform for students/parents/etc and just found TY. Seems like a possible fit. I have seen some of the comments in this forum about various integrations, but is there a dev doc that goes through all the ways to integrate into a SPA/web app? I've seen some references to using an IFRAME to host the TY content, that may work for me. My app has its own UX/branding/etc of course and anything I integrate within the platform will need to blend in well in that regard.

    So, in terms of the API docs, integrations, branding/theming, hooking into posts and controlling the sidebar visibility as well as the online user sidebar where would I find the docs for this? I know it's open source so is the current approach for a deep integration with TY more of an exploration of the code and trial/error at this point?

    Currently, I need to integrate comment/comment threads into some of my pages, I may utilize the forum feature for Q+A and possibly the live chat as well. But my number 1 feature is a robust commenting system that would integrate well with a static site SPA architecture. I host my site on S3 with a Vue front-end, use Lambda for the backend along with MongoDB and control all of my own user registration, account management, billing, etc etc myself.

    Thanks, looks promising.

    Chris

    Solved in post #2, click to view
    • 2 replies
    1. Hi Chris, Right now, only how to add embedded comments to one's blog, is documented and well tested. That's done via an iframe.

      The whole forum should be possible to embed in an iframe too, e.g. in a mobile app or a Single Page Web App. (Or you can add the forum to a sub domain.) I have in mind to add iframe URL parameters, as needed, so people can customize how Talkyard works, when the complete forum is embedded inside an ifarme (and not just embedded comments). E.g. sidebar visibility.

      @chrscheuer has embedded Talkyard in an iOS app in a WebView component. However, because of some upcoming iOS changes, Talkyard instead needs to be embedded in an iframe. (Maybe that's the topic you found, Chris?) — I recently made some changes so embedding Talkyard in an iframe should work, but so far it's been tested on my localhost laptop only.

      You can edit CSS and change how everything looks, and add your own top nav bar and links and logo, or show no top nav bar at all (maybe you have your own logo and nav bar instead, on the embedding page, above the iframe) — this is not yet well documented though. (I have in mind to add a user friendly UI for this.)

      What about forum categories? Will your Q&A / forum need different categories or groups, for different classes and / or school topics? Or one category for everything?

      What about user groups? You mentioned students, parents, ... teachers? teacher assistants? Do they need different types of access and different permissions, or they can be on the same "level" all of them?

      I'm away most of this weekend. Maybe won't reply again, until Monay or Tuesday next week.

      ReplySolution
      1. Chris @smartops
          2019-07-20 15:16:01.576Z

          Sounds good. I'll do some more testing on my trial account and see how it goes. I have some ideas about how to manage / control the forum if there's not an API or method I need that's not exposed. Basic thought is write a JS wrapper that loads and then manipulates TY to ensure it looks exactly how I need. Here's what I'm thinking but this is prior to me really knowing a lot about TY, some of this might not be needed.

          • Write a JS wrapper that embeds, loads TY.
          • Then if there's any branding/CSS that I need to manipulate in TY, I can do this before TY is displayed but after it's successfully loaded. That way, if there's anything I need to change when the threads/comments/forums appear, it's done before TY is displayed.
          • I might write some JS hooks to trap events so that when replies or other events happen, I can intercept those in my wrapper JS.

          Hopefully, all of your customization features prevent me from having to do anything in a wrapper layer but it won't be hard to add this wrapper if needed. Also, yes, I have different roles/permissions and those will have to be enforced via API calls when I provision new users in my system (I'll then in turn have to call your API to add a user and grant them access to various TY features or deny as needed during my user reg/provisioning process). And, for sure I have to implement SSO.

          Thanks, I'll make some notes as I work through the testing.

          Chris