concierge-js-bundle.web.app Open in urlscan Pro
2620:0:890::100  Public Scan

Form analysis
3 forms found in the DOM

<form id="concierge-bis-form">
  <p class="concierge-header" style="font-size:2rem">Don't miss your chance</p>
  <p class="concierge-subheader" style="font-size:1.2rem">These items are extremely limited and tend to go fast.</p>
  <div class="react-tel-input"><label class="react-tel-label"></label><input type="tel" class=" form-control" id="phone-form-control" style="padding:10px;width:60%" value="" placeholder="Enter Phone Number" name="phone" required="">
    <div class=" flag-dropdown" id="flag-dropdown" tabindex="0" role="button">
      <div class="selected-flag" title="United States: + 1">
        <div class="flag us">
          <div class="arrow"></div>
        </div>
      </div>
    </div>
  </div><button class="concierge-button" style="opacity:0.7;padding:10px;width:60%;cursor:not-allowed" disabled="">Get text notification</button>
  <div><input type="checkbox" value="false" name="accept_sms_marketing"><label style="font-size:0.8rem">Also add me to the Concierge SMS List</label>
    <p class="concierge-sms-mi-text" style="font-size:0.8rem"> <!-- -->By providing your phone number, you agree to receive recurring automated marketing text messages from Concierge. Frequency varies by account. Consent is not a condition of
      purchase. Carrier message and data rates may apply.<!-- --> </p>
  </div>
</form>

<form id="concierge-bis-form">
  <p class="concierge-header" style="font-size:2rem">Get notified when this item is back!</p>
  <p class="concierge-subheader" style="font-size:1.2rem">We'll drop you a message</p>
  <div class="react-tel-input"><label class="react-tel-label"></label><input type="tel" class=" form-control" id="phone-form-control" style="padding:10px;width:60%" value="" placeholder="Enter Phone Number" name="phone" required="">
    <div class=" flag-dropdown" id="flag-dropdown" tabindex="0" role="button">
      <div class="selected-flag" title="United States: + 1">
        <div class="flag us">
          <div class="arrow"></div>
        </div>
      </div>
    </div>
  </div><button class="concierge-button" style="background-color:#2f5153;color:#fff;margin-top:5px;margin:5px;padding:5px;border-radius:10px" disabled="">Get text notification</button>
  <div><input type="checkbox" value="false" name="accept_sms_marketing"><label style="font-size:0.8rem">Also add me to the Great Company SMS List</label>
    <p class="concierge-sms-mi-text" style="font-size:0.8rem"> <!-- -->By providing your phone number, you agree to receive recurring automated marketing text messages from Great Company. Frequency varies by account. Consent is not a condition of
      purchase. Carrier message and data rates may apply.<!-- --> </p>
  </div>
</form>

<form id="concierge-sms-opt-in-form">
  <p class="concierge-header" style="font-size:2rem">Don't miss your chance</p>
  <p class="concierge-subheader" style="font-size:1.2rem">Get updated via SMS about new products, events and more!</p>
  <div class="react-tel-input"><label class="react-tel-label"></label><input type="tel" class=" form-control" id="phone-form-control" style="padding:10px;width:60%" value="" placeholder="Enter Phone Number" name="phone" required="">
    <div class=" flag-dropdown" id="flag-dropdown" tabindex="0" role="button">
      <div class="selected-flag" title="United States: + 1">
        <div class="flag us"></div>
      </div>
    </div>
  </div><button class="concierge-button" style="opacity:0.7;padding:10px;width:60%;cursor:not-allowed" disabled="">Subscribe</button>
  <p style="font-size:0.8rem">By providing your phone number, you agree to receive recurring automated marketing text messages from Concierge. Frequency varies by account. Consent is not a condition of purchase. Carrier message and data rates may
    apply.</p>
</form>

Text Content

Documentation
 * Getting Started
 * Backinstock
   * Javascript API
   * REST API
   * React
 * SmsOptIn
   * Javascript API
   * REST API
   * React


GETTING STARTED


OBTAIN YOUR PUBLIC KEY

First, you'll need a Public Key for your Concierge account. Each Public Key is
tied to a request origin and environment.

The Origin request header indicates where a fetch originates from, e.g.
yoursite.com. If you plan to use the Concierge API from different origins (e.g.
staging.yoursite.com and www.yoursite.com), you'll need a separate Public Key
for each origin.

HOW TO OBTAIN A PUBLIC KEY

Ask your Account Manager or email service@conciergeteam.co.


--------------------------------------------------------------------------------


BACK IN STOCK

Concierge enables back in stock notifications via SMS that works with Back in
Stock or Klaviyo Back in Stock.

HOW IT WORKS

If your customer requests a Back in Stock SMS notification, Concierge will:

1) Send a registration confirmation to the customer

> {org_name}: Thanks for signing up to be notified when {product_label} is back
> in stock. Reply STOP to cancel.

2) Once the product is back in inventory, we will notify the customer via SMS:

> {org_name}: {product_label} is back in stock

There is a request limit set to 1 request per day per phone_number - variant_id

> We provide different ways to access our backinstock functionality
> 
> >  * 1) Javascript API: Pure Javascript API.
> >  * 2) API Endpoint: HTTP API Endpoint
> >  * 3) React Component: React plug-n-play component ready to be used on your
> >    React project.

PREREQUISITES

In order to create the integration with Klaviyo or Back In Stock we require a
corresponding API Key.


JAVASCRIPT API

Use this low-level function if you are not using a high-level Javascript
framework (e.g React, Vue, Angular) or if you want to keep your JS footprint
small. This is a pure JS function which doesn't require any external library to
work.

SETUP

Include the Concierge JS bundle script into your website's main template so it
will be added on every page.

<script async type="text/javascript" src="https://concierge-js-bundle.web.app/concierge-js-bundle.js"></script>

If you are using Shopify, include it on your template.liquid file.

> This will create the CONCIERGE JS top scope namespace where our API functions
> will be allocated

FUNCTION SIGNATURE

The back in stock function accepts two parameters.

CONCIERGE.backInStockNotification(OPTIONS, onSuccess);

OPTIONS: Configuration options object, See below for accepted list.

> OPTIONS
> 
> NameDescriptionapiKeyYour public API Key. This one changes depending if your
> are on test or prod modeurlThe URL where will be posting the data to. Valid
> values see below for QA and PROD URLSinfoElementId for your html element where
> the resulting information will be placed.formIdID of the form you are using to
> submit the dataplatformbackinstock or klaviyoproductNoProduct
> numberproductLinkProduct link. This should be the full link used to access
> your productproductTitleProduct title.shopifyDomainYour shop shopify
> domainvariantNoThe product variant number/idvariantTitleThe product variant
> title

onSuccess: callback function which will be called after execution.


REST API

The same functionality provided by our JS API can be achieved by using our API
endpoints directly.

You need to adjust your PK depending your environment QA/Test mode

> > POST https://staging.conciergeteam.co/sms_backinstock
> 
> Production
> 
> > POST https://app.conciergeteam.co/sms_backinstock
> 
> Parameters
> 
> NameDescriptionpkYour Public Key. Changes depending on test or prod modeurlThe
> URL where you will be posting the data to. Valid values see below for QA and
> PROD URLSphone_numberA valid US phone numberproduct_noProduct
> numberlinkProduct link. This should be the full link used to access your
> productproduct_titleProduct title.shopify_domainYour shop's Shopify
> domainvariant_noThe product variant number/idvariant_titleThe product variant
> title


REACT

If you are using React already or want to build something quickly, you can use
our Back in Stock plug-and-play React component.

SETUP

Install our react concierge sms package from NPM:

> Install package
> 
> npm install react-concierge-sms

> Include the component
> 
> import { ConciergeBackinStockForm } from 'react-concierge-sms'

BACK IN STOCK FORM

The react component expose the following api:

> <ConciergeBackinStockForm options={options} configuration={configuration}/>

> options
> 
> NameDescriptionpkYour Public Key. Changes depending on test or prod
> modemodedev, test or prod. prod is used by defaultproduct_noProduct
> numberlinkProduct link. This should be the full link used to access your
> productproduct_titleProduct title.shopify_domainYour shop's Shopify
> domainvariant_noThe product variant number/idvariant_titleThe product variant
> title

All options are required, with exception of mode and platform.

Platform will default to backinstock Mode will default to prod (valid values are
prod, test & dev)

> configuration
> 
> orgName: *required*,
> header: "Don't miss your chance",
> successText: "Thank you. We'll send you a message when this item is back in stock.",
> subheader: "These items are extremely limited and tend to go fast.",
> phonePlaceholder: 'Enter your phone number',
> buttonText: 'Get text notification',
> formContainerStyle: {textAlign: 'center', fontFamily: 'Helvetica'},
> buttonStyle: {padding: '10px', width: '60%'},
> buttonDisabledStyle: {opacity: 0.7, padding: '10px', width: '60%', cursor: 'not-allowed'},
> headerStyle: {fontSize: "2rem"},
> subheaderStyle: {fontSize: "1.2rem"},
> phoneInputStyle: {padding: '10px', width: '60%'},
> showSmsMarketingInvitation: true,
> smsMarketingInvitationLabel: 'Also add me to the {{org_name}} SMS List',
> smsLegalNoticeStyle: {fontSize: "0.8rem"},
> smsLegalNotice: "By providing your phone number, you agree to receive recurring automated marketing text messages from {{org_name}}. Frequency varies by account. Consent is not a condition of purchase. Carrier message and data rates may apply.",
> onSuccess: () => {},
> onError: (error) => {console.error(error)},

This is the default configuration used, we can overwrite any existing
configuration by just passing an attribute with the same name on the
configuration object. For those attributes referring to an element style (e.g
buttonStyle) you can pass any value accepted for React's style

> Configurable elements

> Styles names should be specified with an object whose key is the camelCased
> version of the style name

orgName is required. Make sure to update it with your organization name.

> Basic use
> 
> options = {
>     apiKey: 'YOUR_PUBLIC_KEY',
>     productNo: 11,
>     productLink: 'https://yourstore.com/the-product',
>     productTitle: 'The Product',
>     platform: 'klaviyo',
>     shopifyDomain: 'succulentcity.myshopify.com',
>     variantNo: 'variant no',
>     variantTitle: 'variant title'
>   }
> configuration = {orgName: 'Concierge'}
> <ConciergeBackinStockForm
>   options={options}
>   configuration={configuration}
> />

> We provide one component that can be easily configured to the most common use
> cases.

1) Inline form:

> Just use use the component right where you needed.

<ConciergeBackinStockForm options={options} configuration={configuration}/>

2) Dialog

> To avoid unnecessary libraries to be packaged, we recommend to include our
> form component using your dialog implementation/library of preference.
> 
>   <YourDialog>
>      <ConciergeBackinStockForm options={options} configuration={configuration}/>
>   </YourDialog>

DEFAULT CONFIGURATION

Below the back in stock form with no configuration at all (whitelabel). The form
will inherit the style used on your site.

> Out of the box usage
> 
> Don't miss your chance
> 
> These items are extremely limited and tend to go fast.
> 
> 
> Get text notification
> Also add me to the Concierge SMS List
> 
> By providing your phone number, you agree to receive recurring automated
> marketing text messages from Concierge. Frequency varies by account. Consent
> is not a condition of purchase. Carrier message and data rates may apply.

WITH SOME CUSTOMIZATION

By passing our own configuration object we can overwrite the default
configuration In the next example we can see how we can use the parameters to
pass required values and overwrite the configuration at the same time.

> Custom
> 
>   <ConciergeBackinStockForm
>     options={{
>       apiKey: 'eyJhbGciOiJIUzI1NiJ9.eyJvcmdfaWQiOjgxLCJvcmlnaW4iOiJodHRwczovL3d3dy5jYWN0aWxpY2lvLnVzIn0.dAbeoicGWKesbRrmQRCwYHevNm0IR50L1eeCVJKDWNU',
>       mode: 'test',
>       productNo: 999999,
>       variantNo: 899988,
>       productLink: 'https://yourstore.com/the-product',
>       productTitle: 'The Product',
>       acceptsMarketing: false,
>       platform: 'klaviyo',
>       shopifyDomain: 'succulentcity.myshopify.com',
>       variantTitle: 'Blue'
>     }}
>     configuration={{orgName: 'Great Company',
>       smsInsiders: false,
>       formContainerStyle: {textAlign: 'center'},
>       buttonStyle: {
>          backgroundColor: '#1d262f',
>          color: '#fff',
>          marginTop: '5px',
>          margin: '5px',
>          padding: '5px',
>          borderRadius: '10px'
>       },
>       header: 'Get notified when this item is back in stock.',
>       subheader: "We'll send you a text message."
>     }}
>   />

This how the form with the preceeding cuzotmizatoin will look like

Get notified when this item is back!

We'll drop you a message


Get text notification
Also add me to the Great Company SMS List

By providing your phone number, you agree to receive recurring automated
marketing text messages from Great Company. Frequency varies by account. Consent
is not a condition of purchase. Carrier message and data rates may apply.

--------------------------------------------------------------------------------


SMSOPTIN

Enable customers to subscribe to your SMS distribution list.

HOW IT WORKS

1) Customer will provide his/her number and accept terms and conditions

2) Concierge sends a confirmation message to confirm the phone number

3) Customer replies "JOIN"

4) Afte receiving the reply message, Concierge will add the customer to your
opted-in list

5) Concierge sends a welcome message to the customer to confirm the subscription

PREREQUISITES

In order to use this functionality Concierge requires a corresponding API Key.


JAVASCRIPT API

SETUP

FUNCTION SIGNATURE


REST API

We provide a REST end point with the following signature:

> QA/Test mode
> 
> > POST https://staging.conciergeteam.co/sms_opt_in

> Production
> 
> > POST https://app.conciergeteam.co/sms_opt_in

Remember to adjust your PK depending the environment your are running on
(dev,test or prod)

Parameters

> required options
> 
> NameDescriptionpkYour Public Key. Changes depending on test or prod
> modephone_numberCustomer Phone Number

> optional options
> 
> NameDescriptionemailCustomer Emailfirst_nameCustomer First
> Namelast_nameCustomer Last Namesign_up_preferred_associateAssociate ID of the
> associate we will assign the customers that sign upsign_up_commentsSignup
> commentsutm_sourceutm_sourceutm_mediumutm_mediumutm_contentutm_contentutm_campaignutm_campaign

> responses
> 
> HTTP CODEDescription200On Success403Invalid PK422phone_number or PK is missing


REACT

SETUP

Install the Concierge React sms package from NPM:

> Install package
> 
> npm install react-concierge-sms

> Include the component
> 
> import { ConciergeSmsOptIn } from 'react-concierge-sms'

CONCIERGESMSOPTIN

The React component expose the following API:

> <ConciergeSmsOptIn options={options} configuration={configuration}/>

> options
> 
> NameDescriptionpkYour Public Key. Changes depending on test or prod
> modemodedev, test or prod. prod is used by default

Additionally you can use the following optional attributes to pass in some
metadata to help you track your campaigns.

> aditional options
> 
> Namesign_up_commentsutm_sourceutm_mediumutm_contentutm_campaign
> 
> This metadata will get attached onto your customer metadata

> configuration
> 
> orgName: *required*,
> header: "Don't miss your chance",
> subheader: "Get updated via SMS about new products, events and more!",
> phonePlaceholder: 'Phone number',
> buttonText: 'Subscribe',
> successText: 'Thank you. We have sent you a message to confirm your subscription.',
> formContainerStyle: {textAlign: 'center', fontFamily: 'Helvetica'},
> buttonStyle: {padding: '10px', width: '60%'},
> buttonDisabledStyle: {opacity: 0.7, padding: '10px', width: '60%', cursor: 'not-allowed'},
> headerStyle: {fontSize: "2rem"},
> subheaderStyle: {fontSize: "1.2rem"},
> phoneInputStyle: {padding: '10px', width: '60%'},
> smsLegalNoticeStyle: {fontSize: "0.8rem"},
> smsLegalNotice: "By providing your phone number, you agree to receive recurring automated marketing text messages from {{org_name}}. Frequency varies by account. Consent is not a condition of purchase. Carrier message and data rates may apply.",
> onSuccess: () => {},
> onError: (error) => {console.error(error)},

This is the default configuration; You can overwrite an existing configuration
by passing an attribute with the same name on the configuration object. For
attributes referring to an element style (e.g buttonStyle) pass any value
accepted for React's style

> Configurable elements

> Style names should be specified with an object whose key is the camelCased
> version of the style name

orgName is required. Make sure to update it with your organization/company name.

> Basic use
> 
> <ConciergeSmsOptIn
>   options={{ pk: API_KEY}}
>   configuration={configuration}
> />

> We provide one example component that can be easily configured for the most
> common use case.

1) Inline form:

> Use the component wherever you need it.

<ConciergeSmsOptIn options={options} configuration={configuration}/>

2) Dialog

> To avoid packaging unnecessary libraries, we recommend including a form
> component in your preferred dialog.
> 
>   <YourDialog>
>      <ConciergeSmsOptIn options={options} configuration={configuration}/>
>   </YourDialog>

DEFAULT CONFIGURATION

Here is a whitelabel back in stock form with no configuration. The form will
inherit the styles used on your site.

> Out of the box usage
> 
> Don't miss your chance
> 
> Get updated via SMS about new products, events and more!
> 
> 
> Subscribe
> 
> By providing your phone number, you agree to receive recurring automated
> marketing text messages from Concierge. Frequency varies by account. Consent
> is not a condition of purchase. Carrier message and data rates may apply.