With V1, I had coded a lot of styling changes to align my studio with my website—using the additional script field at the Studio level. Although some elements were a bit broken, it wasn’t too major after migrating to V2. I was hoping V2 would offer more capabilities to style and customise the elements on the pages. While it does have more now, it’s still not quite enough for my use case.
I’ve largely finished my migration and achieved what I wanted: larger image on each pickaxe, extra buttons on the landing page (only on desktop to avoid cluttering the mobile view), and the integration of Google Fonts within my studio. All of these changes have been implemented via additional scripts in the settings tab of the studio under V2.
For those interested, attached is a screenshot of what it looks like now.
The main reason for these changes was that I wanted to build the studio into a mobile app—which I have done successfully. The mobile version renders correctly on iOS devices, although I still have one or two issues getting the input field to sit above the pop-up keyboard on some Android devices.
For now, I believe I’ve given my studio a unique style that is in keeping with my main website. I’d love to get any feedback, and if anyone wants to see the code I used, feel free to reach out.
I’ve just successfully implemented my first code injection in Settings, to enlarge and vertically move the round image on a Pickaxe chat page. This is my code:
I’m currently tearing my hair out to figure out how I can remove the “Log in” and “Sign up” buttons at the extreme top right of my landing page. (I’m developing a Pickaxe for which nobody will need to anyone to log in. I don’t want to confuse people with those buttons.) I’ve tried some code injection, but am very rusty on such stuff and can’t figure it out. Any chance you might have any code that would help with that?
Thank you so much, @ecaveo! This removed the “Get Started” button as well, which I need, but your code helped me to better understand how to assemble the classes needed to uniquely identify the element I want to address, and with a little modification I now have the desired result. Thanks again!
I get that its not best practice @stephenasuncion but in the absence of what I consider suitable control over the Pickaxe design interface needed to build an effective user experience, this appears to be the only way (for now).
As the platform uses Tailwind, 99% of the styling changes I have made are anchored to Tailwind. As Tailwind is very well documented, its generally been quite a reliable process.
As for changes… I hash this file and compare versions every five minute using a git action to see if anything has changed: _next/static/css/04fe2274e7459ac0.css?dpl=dpl_mLUU69FebJymCXPT9Fft25E9bbwX
If all else fails and the hash is different, I can temporarily remove the code (which I have fully documented in my Pickaxe Studio) whilst I work out whats happened/happening. I’d love to have access to this via an API but I presume an API is not a near term priority for the Pickaxe team? As an alternative, It would be great if I could use an external file with my script and CSS overrides in that I could store in the cloud and I could then automate removing this if the hash changes and there is a prospect of breaking my Pickaxe.
Which brings me to some best practices it would be good to see from Pickaxe:
Ideally, we need a live changelog on what has changed… whilst I haven’t seen any change inTailwind classes, I’ve seen subtle changes elsewhere that arrive unannounced and without warning (of course these are always improvements, and none of these has broken my styling so all good at the moment).
We need more flexible styling control with more granular control of on page elements. This includes the ability to use Google Fonts and our own images/animations (is it just me or is the action animation the ugliest animation ever? The 1990s called and they want their loading icons back). Currently, with around a dozen or so controls over the page, it means its difficult to give your pickaxe a genuinely unique style… Which I have done by working the Tailwind.
A CSS override box separate from the Script Injects are needed. I want to separate the two so I can manage my cookie and privacy management separately from styling (on this, the current script inject page is problematic as the auto save frequently interferes with workflow leading to some lost changes or corrupt coding. I’d like the ability to switch it off in favour of manual save or have auto save work to a 60 second cycle not just every time it detects a change. I’d also like a larger view as editing with only a handful of lines visible as a window over your script can make this difficult.
Some of my styling is designed to cover up glitches on the site. When you switch pickaxes, the rendering of the new Pickaxe flashes the ‘new chat’ buttons on the screen as it loads. I style this out by using a controlled fade with a .2s delay. Slows things down very very modestly but makes for a better UX. Other examples of this are when you embed an image on the home page using markdown. It works but when the page loads, it flashes the link to the image file before loading it. I get around this by fading in the Tailwind class that the image and text are rendered in. This looks much nicer and gets rid of the flash.
In trial with members of a national Olympic Team, they told me they wanted some on page links to ‘support’ and ‘notes’ regarding the tools. I’ve done this through styling and adding my own Tailwind called buttons. These are essential but we need the ability to do this via the page design tools.
I need to be able to refresh the look of my tool to reflect that changing look of other online chatbots to ensure mine looks, and retains a freshness. This means design and styling, not just brute force implementation of AI Agents.
Its not an exhaustive list and I know others need more or different things but it would be great if you could work with us and this and give us more control over design. Even if just opening up more control over your use of Tailwind.
None of this detracts from what I think Team Pickaxe has built here. Its really, really good… but, its only a short hop to being really, really great.
My latest well received Studio changes have introduced an on page FAQ button that fires a styled popup… take a look here. I’d love the ability to do this through the backend rather than via script.
If you have linked from a website that you would like your users to be able to get back to, then I have scripted a simple menu option for whatever you would like to put there. Simply change the URL in the code to point to your site page.
Thanks @ecomprocess but I’m already doing this in a style that fits in with my Studio. ON the Landing page example here, the green arrow indicates where I have replaced the Studio Title with a logo image the blue arrow is an additional button added adjacent the ‘try it now’ button, styled the same way using a regular SVG.
On the second example, you can see that the one in a pickaxe, I render two additional buttons. In the close up, you’ll see the blue arrow points to some low key text… this is a version control number and a date and time stamp - on the support page, it will ask for a screen shot and this helps me to get a signpost to start digging in the backend as needed… the V2 is the Pickaxe Studio version we’ve probably all migrated to and the decimal number is my version to the prompt set I am using (I keep all the old versions of my prompts, JIC I need to rollback).
With the buttons indicated at the green arrow, one is to my ‘Support Form’ (this will eventually go to my CRM/Support system). The FAQ button actually triggers an onpage FAQ popup.
These only appear once at the start of a user session in the Pickaxe but the clock updates as the session progresses so the use just needs to screen shot this at the top of their current session.
On the close up below, you might also spot that I’ve restyled the prompt entry field/box to give it a slightly less utilitarian look!
Its pretty easy to code these and the only real change I want to make is to pull through the FAQ text from an external file which I will get to eventually .
Hi ecaveo, this is really impressive and unique, a very professional studio. Could you share the embed code to create those buttons below the bot messages?
