Embed typeform on the left side | Community
Skip to main content
Answered

Embed typeform on the left side


Hello, 

I was wondering if it was possible to embed a typeform popover on the left side of the page instead of the right side? Currently on the right side of the page we have our chat widget there and if we embed the the typeform there it blocks the chat or vice versa the chat will block the form. 

Best answer by mathio-tf

Hello @Wilson H  and @Liz 

I think it is doable with some CSS:

<style>
  .typeform-popover {
    left: 26px !important; /* move the popover to left */
    width: 200px; /* limit popover width */
  }
  .typeform-popover-button {
    left: 26px !important; /* move the button to left */
  }
</style>

<div data-tf-popover="Cqrg7cgL"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Example: https://glitch.com/edit/#!/ring-rounded-ridge

Please keep in mind this is a workaround and it is not guaranteed to be supported in future. I would suggest to install the library locally (yarn add @typeform/embed) to prevent future updates from breaking it for you.

View original

2 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15028 replies
  • May 25, 2021

Hi @Wilson H welcome to the community! We don’t currently have an out-of-box way to move the chat icon from the right to the left. :\ Though, it may be possible that @picsoung or @mathio have a workaround!


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • May 31, 2021

Hello @Wilson H  and @Liz 

I think it is doable with some CSS:

<style>
  .typeform-popover {
    left: 26px !important; /* move the popover to left */
    width: 200px; /* limit popover width */
  }
  .typeform-popover-button {
    left: 26px !important; /* move the button to left */
  }
</style>

<div data-tf-popover="Cqrg7cgL"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Example: https://glitch.com/edit/#!/ring-rounded-ridge

Please keep in mind this is a workaround and it is not guaranteed to be supported in future. I would suggest to install the library locally (yarn add @typeform/embed) to prevent future updates from breaking it for you.


Reply