I'm exploring ideas for embedding some dynamic content within an existing WordPress website. Is it p...

# kobweb

[Jeff Lockhart]

I'm exploring ideas for embedding some dynamic content within an existing WordPress website. Is it possible to do something like this with a kobweb app?

[CLOVIS]

It's definitely possible, but how easy it is depends on exactly what you're trying to embed

[Jeff Lockhart]

It's mostly UI in table format, which I need to be responsive. Data is populated from JSON REST APIs. I also may populate some images from URLs within the JSON data.

I'd like to be able to write the code in Kotlin using Compose UI. I won't need navigation, but I think Kobweb's Silk UI layer would be preferable to doing this directly in HTML/CSS.

[CLOVIS]

To clarify: you're making a request that returns JSON, and you want to display the results?

[Jeff Lockhart]

Yes, formatted in the UI.

[CLOVIS]

Essentially, what you'll want to do is:
• make the request with your web client of choice (I believe Kobweb bundles one?)
• deserialize your data into something more convenient to work with (usually, data classes)
• then you can use that as you want in your UI code
I thought that there was an example with the README with all of this, but I can't find it at the moment. cc @David Herman

[CLOVIS]

As pseudo-code:

@Composable
fun YourScreen() {
    var results by remember { mutableStateOf(null) }

    LaunchedEffect(Unit) {
        results = … // make your request
    }

    for (result in results) {
        // call components here
    }
}

[Jeff Lockhart]

Yeah, that's what I was hoping to be able to do. So then when Kobweb compiles the HTML output, can I take that and embed it in an HTML widget within a WordPress page? Does Kobweb output HTML, CSS, and JS?

[CLOVIS]

Oh, wait, you want to embed Kobweb into Wordpress? I understood the opposite.

[CLOVIS]

To embed into another website:
• the other website should create an element of some kind (probably a div) which you should bind yourself to
• when you call renderComposable at the root of your program, you can pass that div
This will start Compose specifically in that div, instead of in the entire screen. After that, everything is the same.

[CLOVIS]

I don't remember if Kobweb gives you access to the root composable call or if it's hidden

[Jeff Lockhart]

Yeah, sorry if that wasn't clear. The JSON REST APIs are from a database. Then the dynamic UI needs to be embedded in a page on a WordPress website.

[CLOVIS]

I see. Sorry for the confusion.

Yeah, the trick is to bind Compose to the div from the section of the page you want to embed yourself, instead of the root of the page. Other than that, everything should be fairly normal.

[CLOVIS]

For the machinery on the Wordpress side—you should be able to find tutorials on how to embed React or similar frameworks, embedding Kobweb after compilation should be essentially the same

[CLOVIS]

…and yes, Kobweb generates HTML, CSS and JS 🙂

[Jeff Lockhart]

So essentially I should be able to embed a single div as an HTML widget on the WordPress page. Then it's a matter of executing the renderCompasable function on that page as well.

[CLOVIS]

Yes

[Jeff Lockhart]

Awesome. I'll dig into this some more. Sounds like this should be doable. Thanks for your help!

[CLOVIS]

No problem 👍

[David Herman]

So the answer might be a bit complicated. I'm not familiar with wordpress so it's hard to say anything confidently.

[David Herman]

Fundamentally, Kobweb builds an index.html file for you and expects you to use that

[David Herman]

I had a proof of concept of a Google Chrome extension working before, but in that case, I took the html file generated by Kobweb and exposed that as a file in the Chrome extension manifest.

[David Herman]

You can use Silk without Kobweb, which is probably what you want to do. Just note that a lot of the magic that Kobweb does for you in that case you'll need to do manually.

[David Herman]

It's documented, let me link to it.

[David Herman]

https://github.com/varabyte/kobweb/blob/main/frontend/silk-widgets/README.md

[CLOVIS]

Does Kobweb allow to configure the root div ID?

[David Herman]

Nope, it's hardcoded to "root"

[David Herman]

But Jeff probably doesn't want to use kobweb core. The main point of that is for navigation / routing.

[CLOVIS]

I see. I think this is going to be the main blocker here

[David Herman]

Well if they use Silk without Kobweb it doesn't matter.

[David Herman]

They can get `Modifier`s and `ComponentStyle`s and use of Silk widgets, which isn't nothing.

[CLOVIS]

He'll have to initialize silk manually then?

[David Herman]

Yeah, it's described in the README above.

[David Herman]

https://github.com/varabyte/kobweb/blob/main/frontend/silk-foundation/README.md is the list of features that Silk gives you.

[Jeff Lockhart]

Thanks for the info, David. I'll check it out.

[Ahmed Riyadh]

You can use the Wordpress rest api, but it's not designed for end users, it's more like for admin dashboard or something like that, I recommend you to migrate the data from Wordpress and create your own thing, you don't have to create it from scratch, you can use something like Firebase as a backend and there are many other solutions

[Jeff Lockhart]

The data isn't in WordPress. The website pages are. The data is in another database backend (Couchbase).

I used the WordPress REST API a while back to get WordPress data into a mobile app. It was definitely clunky.

[Ahmed Riyadh]

I tried creating mobile app for Wordpress platform (with support for woocommerce plugin) back when Covid 19 was more popular, the app didn't come out and it failed and it's mostly because of the challenges was on how Wordpress designed, there is no rest api for what you want, you have to create it from scratch using a plugin with PHP, but that is not the problem (the plugin: https://github.com/ellet0/wordpress-egt-rest-api)

It's simple if you only want to get the posts, but if you want a full efficient e-commerce application I still recommend to find some other solution

[Jeff Lockhart]

Definitely. This was back in 2012 when I did this. But in this case, that's not what I'm trying to do. I just want to embed some dynamic HTML into an existing WordPress page.

[Ahmed Riyadh]

I see. I might misunderstood your message.

[Jeff Lockhart]

No worries. Thanks for the feedback.