Zipwhip Widget Inbox & Conversation Components

There are two components of the Texting Widget – the Inbox Component and the Conversation Component.

Inbox Component

The Inbox Component displays a list of all existing conversations, the ability to navigate between conversations and to create new conversations.

Inbox Component

To embed the Inbox component, create an iframe with a src url of https://embed.zipwhip.com

<iframe src="https://embed.zipwhip.com" width="400px" height="600px"></iframe>

Conversation Component

The Conversation Component displays the contents of a specific conversation and provides the ability to have a two-wayconversation with the specified recipient.

Conversation Component

To embed the Conversation component, create an iframe with a src url of https://embed.zipwhip.com/messaging/{phoneNumber} where {phoneNumber} is the mobile phone number of the person you want to send a text message to.

<iframe
  src="https://embed.zipwhip.com/messaging/5032742449"
  width="400px"
  height="600px"
></iframe>

The Inbox and Conversation Components contain header and footer elements. Each of these items can be shown or hidden through the use of URL Parameters.

Widget UI Elements

Embedded vs Popup

The Widget can be embedded on a web page or displayed in a popup window.

Embedded

embed on page

To display the Widget embedded on a page, as in the example above, simply render the component in an iframe somewhere on your existing web page, like so:

<iframe
  src="https://embed.zipwhip.com/messaging/{phoneNumber}"
  width="400px"
  height="600px"
></iframe>

poput window

To display the component in a popup window, as in the example above, wrap the URL in a `javascript:window.open call.

<a 
  href="javascript:window.open(
    'https://embed.zipwhip.com/messaging/{phoneNumber}', 
    'widget', 
    'width=400px,height=600px,top=0,left=0'
    )"
  >Open Popup Widget
</a>

Tip: The second parameter, 'widget', specifies the name of the window that will be opened when clicking the link. If you use the same name each time you open the popup widget, then the popup will only open one window at a time. If you want to open a separate window each time the popup widget is opened, change the name of the second paramter to '_blank'.

In addtion to the examples above, you can render the widget in a sidebar or panel using the CSS techniques desribed on w3schoos.com.