Shellyj

How do i embed the code to my website to have the feature please @Ziggy

Site URL: https://www.leveragingreality.com Hello @Ziggy Please i need help embedding a chatbot on my website. I would like it to the right side of my web pages so people can click if they want to chat. I have the code and reference i like but i will like to replace the icon with an image instead Please can you help me I have the codes Embed your AI chat: Embed your chat interface anywhere you can use HTML. <iframe src="https://app.coachvox.ai/avatar/pBzwAVLUMlYFeK5CCQ7l/embed" allow="microphone;" style="height:720px !important;width:100% !important" ></iframe> or Create a popup: Add this code to any web page to display a popup version of your chat interface on that page. Add the code to the header or footer to make it appear on your entire site. (this pasted weird, let me know if it dosent work) <div style="position: fixed;z-index: 234567890;bottom: 10px;right: 10px;min-width:130px;min-height:130px;overflow:hidden;"> <script> (function() { var handleMessage = function(event) { try { if(JSON.parse(event.data) === 'openChat'){ document.getElementById('smallChatCoachvox').setAttribute("style","height:550px;width:300px;"); } if(JSON.parse(event.data) === 'closeChat'){ document.getElementById('smallChatCoachvox').setAttribute("style","height:130px;width:130px;"); } } catch(e) {console.log(JSON.stringify(e))} }; window.addEventListener('message', handleMessage); })(); </script> <iframe src="https://app.coachvox.ai/avatar/pBzwAVLUMlYFeK5CCQ7l/embed/small" allowfullscreen allow="microphone;" frameBorder="0" id="smallChatCoachvox" allow="microphone;" style="position:absolute;height: 130px;bottom: 0px; width:130px;"></iframe> </div>

Thank you I thought i took that out already but its sorted now

That's what i am talking about You can see the header isnt reflecting atall I checked the page settings and all but it's on I don't know why its like that I will attach screebshot

I created some pages but the header isn't showing both on the one i shared and the other navigation is not showing and space for logo and i don't know wht

Site URL: https://oya-supplements.squarespace.com/home-1 Hello Please can you have a look I am designing the site but i can't get the header to reflect and i do not seem to get where the issue or problem is can you have a look please It is urgent @Ziggy

How can i do that please @Ziggy And what do you mean by direct assistance Do i need to add a code under the custom css space on squarespace or on the home page wgere the timeline code was embeded

How can i do that please @Ziggy

One last thing Is the a way the bold font can match with the header text of the website to match well or what do you think about that time line please @Ziggy

Yes I just saw it and adjusted Thanks a lot

@Ziggy Here is the embeded code <div class="hello-bar"> </div> <div class="row"> <div class="timeline"> <div class="line"> <div class="start"> Videos </div> <div class="end"> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/64601.png" alt="" /> </div> <div class="date"> Prologue: Hygeia </div> <div class="details"> The early 1800s were the true heyday for the purpose of entertainment. <a href="/2009">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/48301.png" alt="" /> </div> <div class="date"> 1. Mojo </div> <div class="details"> My name is Paul Hallinan Miller, and for the past two years I been in a battle, a defendant in a lawsuit, with a town that I love. <a href="/2010">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/65082.png" alt="" /> </div> <div class="date"> 2. Blackface </div> <div class="details"> Starting off 2010, we encountered some challenges getting on a plane from Chicago to Houston. <a href="/2011">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/34022.png" alt="" /> </div> <div class="date"> 3. Workforce </div> <div class="details"> In 2011 we applied for support through FUEL, a grant by Give Back Cincinnati. <a href="/2012">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/61291.png" alt="" /> </div> <div class="date"> 4. $1 Building </div> <div class="details"> In 2012, the Madisonville Arts Center was facing difficulties. <a href="/2013">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/66315.png" alt="" /> </div> <div class="date"> 5. The Bank </div> <div class="details"> Always striving to keep things local, I'd held accounts with the two town banks from the very beginning... <a href="/2014">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/43349.png" alt="" /> </div> <div class="date"> 6. KIDS and BEER? </div> <div class="details"> I've been told many times "You can't mix youth circus and beer." <a href="/2015">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/59919.png" alt="" /> </div> <div class="date"> 7. Germans </div> <div class="details"> The owners of the classic circus were rich due to exploiting people, exploiting animals... <a href="/2016">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/59801.png" alt="" /> </div> <div class="date"> 8. Dealing Drugs </div> <div class="details"> Feb. 13, 2018 The troubling discovery of a heroin needle in my parking lot... <a href="/2017">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/23656.png" alt="" /> </div> <div class="date"> 9. Circus Wellness </div> <div class="details"> "What? A circus as a grief event?" A caller interrogated... <a href="/2018">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/65202.png" alt="" /> </div> <div class="date"> 10. Corn Dogs </div> <div class="details"> Along the Ohio River, Northern Kentucky has a string of enchanting little cities <a href="/2019">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/62238.png" alt="" /> </div> <div class="date"> 11. KOCH BROS. & Elected </div> <div class="details"> The city's shutdown of the circus in 2015 inspired me to get politically... <a href="/2020">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/62238.png" alt="" /> </div> <div class="date"> 12. Temptation </div> <div class="details"> I tune in to the local news when I can, but Circus Mojo always... <a href="/2021">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/62238.png" alt="" /> </div> <div class="date"> 13. Big Blue & Robert E. Lee </div> <div class="details"> I'm getting to an age now where my friends and I... <a href="/2022">Read more</a> </div> </div> <div class="event"> <div class="icon"> <img src="http://cdn.flaticon.com/png/256/62238.png" alt="" /> </div> <div class="date"> 14. From Jerry to Landau </div> <div class="details"> In 2011 I got a call from a gentleman who lives in Rivers Breeze, the fancy condo development... <a href="/2023">Read more</a> </div> </div> </div> </div> <style> .timeline { width: 100%; height: auto; margin: 150px 0; position: relative; .line { width: 5px; height: 2000px; min-height: 250px; background: #393939; margin: 25px auto; left: 50%; right: 50%; z-index: 1; position: absolute; } .start { font-size: 32px; position: absolute; top: -45px; left: -35px; } .end { font-size: 32px; position: absolute; bottom: -45px; left: -35px; } .event { width: 38%; height: 200px; text-align: center; box-shadow: 0 0.01em 0.01em #000; margin: 50px 0 0 5%; padding: 25px; background: #fff; z-index: 2; float: left; box-sizing: border-box; position: relative; &:before { content: ""; width: 0; height: 0; position: absolute; top: 75px; right: -28px; border-style: solid; border-width: 25px 0 25px 28px; border-color: transparent transparent transparent #ffffff; z-index: 4; } &:after { content: ""; width: 0; height: 0; position: absolute; top: 74px; right: -30px; border-style: solid; border-width: 26px 0 26px 30px; border-color: transparent transparent transparent #aeaeae; z-index: 3; } .icon { position: absolute; right: -20px; top: -20px; height: 50px; width: 50px; background: #393939; border-radius: 50%; z-index: 3; img { max-width: 60%; height: auto; margin: 20%; filter: invert(100%); } } .date { font-weight: 700; font-size: 2rem; } .details { font-weight: 400; font-size: 1rem; margin: 20px 0; padding: 0; } &:nth-of-type(odd) { float: right; margin: 90px 5% 0 0; .icon { left: -20px; } &:before { left: -28px; border-width: 25px 28px 25px 0; border-color: transparent #ffffff transparent transparent; } &:after { left: -30px; border-style: solid; border-width: 26px 30px 26px 0; border-color: transparent #aeaeae transparent transparent; } } } } @media (max-width: 768px) { .timeline { .event { float: right; width: 60%; min-width: 300px; margin: 10% 10% 0 0; &:before { content: ""; width: 0; height: 0; position: absolute; top: 75px; left: -28px; width: 0; border-style: solid; border-width: 25px 28px 25px 0; border-color: transparent #ffffff transparent transparent; } &:after { left: -30px; border-style: solid; border-width: 26px 30px 26px 0; border-color: transparent #aeaeae transparent transparent; } .icon { left: -20px; } &:nth-of-type(odd) { margin: 10% 10% 0 0; } } .line { height: 3200px; left: -20px; } } } @media (max-width: 575px) { .timeline { padding: 100px 0 0 0; margin: 0 0 150px 0; } .timeline .event, .timeline .event:nth-of-type(odd) { float: none; margin: 15% auto; } .timeline .line { left: 50%; height: 3050px; } .timeline .event:before, .timeline .event:nth-of-type(odd):before, .timeline .event:after, .timeline .event:nth-of-type(odd):after { display: none; } .timeline .event .icon, .timeline .event:nth-of-type(odd) .icon { left: 128px; } .timeline .event .date { margin: 25px 0 0 0; } } /* TODO Add utility class to stylesheet*/ .center { text-align: center; } </style>

I have access to the site It happened that the person who started didn't finish so i am to continue A code was embeded on the site and i don't want to tamper with it because i don't know But i need to fix the allignment The clients wants it all alligned Should i copy all the code here so you can help correct it or how do i fix please?

Thanks for responding so how do i fix that please? @Ziggy

Site URL: https://banjo-orca-abrt.squarespace.com/home-2 Hey Squarespace family Please i need help with a client sites https://banjo-orca-abrt.squarespace.com/home-2 Pw; Circus There is an interactive code there but i need it to be alligned together like the onces at the button and are they ways to style it to fit properly into the website I will attach screenshot @Ziggy Thanks in advance

@Ziggy Please help me